Mera CSS

Flexible Box Layout

flexbox

Vad är det?

Varför behövs den?

Hur funkar det?

Bygger på två riktningar main axis och cross axis.

Main axis sätts med flex-direction.

Cross axis är alltid vinkelrät mot main axis.

Elementet som använder flexbox för layout
kallas för flex container.

Alla elementets (direkta) barn blir då flex items.

.box {
  display: flex;
}
							

Standardbeteende

• Alla flex items visas på en rad.
• Flex items börjar i start-änden av main axis.
• Flex items sträcks inte ut längs main axis, men de kan komma att krympas.
• Flex items sträcks ut för att täcka cross axis.

Exempel:

.box {
  display: flex;
}
						

  
Ett
  
Två
  
Tre med
extra text

						

Egenskaper för flex containers

flex-direction

Styr riktningen på main axis.

flex-wrap

Bestämmer om flex items ska kunna flöda till en ny rad eller kolumn.

gap

Avstånd mellan de flex items som finns i containern.

Egenskaper för flex items

flex-basis

Utrymme tilldelat till flex item.

flex-grow

Andelar utrymme fås om det finns mer utrymme.

flex-shrink

Andelar utrymme som ska ges upp om det fattas utrymme.

Detaljstyrning av layout

align-items

Anger hur flex items ska placeras längs cross axis.

justify-content

Anger hur flex items ska placeras längs main axis.

När inte flexbox räcker...

Använd Grid Layout

Resurser

A Complete Guide to Flexbox på CSS-Tricks
CSS Flexible Box Layout på MDN
CSS Grid Layout på MDN

Media queries

Vad är det?

Möjlighet att styra presentationen utifrån vad enheten som visar sidan klarar av.

Hur gör man?

@media print {
  img {
    display: none;
  }
}
						

... eller ...

Media types

Det finns tre olika media types.

screen, print, speech

Media features

Det finns många olika media features.

Några exempel är width, height, aspect-ratio, orientation, color, pointer och hover.

Exempel:

@media screen, print { ... }
						

@media (hover) { ... }
						

@media print and (min-resolution: 150dpi) { ... }
						

@media (min-width: 500px and orientation: portrait) { ... }
						

Användningsområden

Särskild presentation vid utskrift.

Ladda bättre bilder på högupplösta skärmar.

Anpassa höjden på rubriker.

Resurser

Media queries på YouTube
Media queries: print styles på YouTube

Mobile First

Ett sätt att tänka!

Börja med den minsta enheten!

Förbättra för större enheter med media queries.

Vilka gränser?

Det beror på...

devfacts.com

I praktiken

Välj någon eller några av de gränser som är meningsfulla för den produkt du bygger.

Använd alltid media queries med min-width.

Placera dina media queries sist i din CSS-fil, i stigande storlek.

Exempel med tre olika storlekar:

/* Regler för minsta storleken. */

@media (min-width: 576px) {
  /* Anpassningar för mellanstorleken. */
}

@media (min-width: 992px) {
  /* Anpassningar för största storleken. */
}
						

Resurser

Media Queries på MDN
Responsive Design Mode på MDN
Media queries breakpoints på devfacts.com

Animering

Vad kan animeras?

Det mesta!

Två sätt

Händelsestyrt

Sätt en tid för animeringen med
transition.

Ändra på någon egenskap, exempelvis med pseudoklassen :hover eller ett Javascript.

Exempel:

div {
  background-color: rgb(250, 173, 65);
  transition: 1s;
}

div:hover {
  background-color: rgb(227, 48, 205);
}
						

Med keyframes

Beskriv din animering med en @keyframe-regel.
Här kan du styra tillståndet vid olika tidpunkter och får på så vis mycket större kontroll över animeringen.

Använd animation för att välja din animering.

Exempel:

div { animation: 5s spinner linear infinite alternate; }

@keyframes spinner {
  0%, 100% {
    border-radius: 0;
    transform: rotate(0deg);
  }

  50% {
    border-radius: 50%;
    transform: rotate(360deg);
  }
						

Resurser

CSS Animations på MDN
@keyframes på MDN