Flexbox

03-04-2018 - Bram Smulders

display: flex

display: flex

  • Vanuit de content
  • Groottes gedefinieerd op het item
  • 1 dimensionaal

flex container

item
item
item
item
item

.container { display: flex; }

Directe kinderen worden flex items zolang ze ‘in flow’ zijn.
Exclusief witruimte, inclusief losse tekst.

flex items




    
flex item

    
flex item

    flex item

Main axis vs cross axis

Main axis vs cross axis

main →

item
item
item
item
item

cross →


.container { flex-direction: row; }

Main axis vs cross axis

cross →

item
item
item

main →


.container { flex-direction: column; }

flex item

flex item: werkt niet meer

  • vertical-align
  • float

flex item: werkt nu

  • flex
  • automagische margins
  • align-self
  • order

flex item: flex


.item {
    flex-grow: 0; /* Maximale groeifactor */
    flex-shrink: 1; /* Maximale verkleinfactor */
    flex-basis: auto; /* Initiële grootte */
}
                    

.item { flex: 0 1 auto; }

flex item: flex


.item { flex: initial; }

Laat item niet groter worden, wel kleiner.


.item { flex: auto; }

Laat item groter, maar ook kleiner worden.


.item { flex: none; }

Niet flexibel, laat item niet groter of kleiner worden.

flex item: wrapping

Wil je items over meerdere kolommen/rijen of juist niet?


.container { flex-wrap: nowrap | wrap; }

flex item: magic margins

item
item
item

.item.left-auto { margin-left: auto; }

flex item: magic margins

item

.item.auto { margin: auto; }

flex item: alignment

item

.item { align-self: center; }

flex item: alignment

item

.item { align-self: flex-end; }

flex item: alignment

item

.item { align-self: stretch; }

flex container

Content uitlijning: main axis

Content uitlijning: main axis

item
item
item

.container { justify-content: flex-start; }

Content uitlijning: main axis

item
item
item

.container { justify-content: flex-end; }

Content uitlijning: main axis

item
item
item

.container { justify-content: center; }

Content uitlijning: main axis

item
item
item

.container { justify-content: space-between; }

Content uitlijning: main axis

item
item
item

.container { justify-content: space-around; }

Content uitlijning: cross axis

Uitlijnen van de lijn ten opzichte van de container op de cross axis

Content uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-content: stretch; }

Content uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-content: flex-start; }

Content uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-content: flex-end; }

Content uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-content: center; }

Content uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-content: space-between; }

Content uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-content: space-around; }

Items uitlijning: cross axis

Uitlijnen van de items ten opzichte van de lijn op de cross axis

Items uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-items: stretch; }

Items uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-items: flex-start; }

Items uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-items: flex-end; }

Items uitlijning: cross axis

item
item
item
item
item
item
item
item
item
item
item
item

.container { align-items: center; }

Order

Order

item 1
item 2
item 3

.item:last-child { order: 1; }