flexbox cheatsheet by @alsacreations

display flex-wrap flex-grow flex-shrink flex-basis

flex-container properties

flex-item properties
flex· inline-flex nowrap· wrap· wrap-reverse 0· 1· 2· … 0· 1· 2· … auto· value· fill· min-content· …
flex-direction flex (= flex-grow flex-shrink flex-basis)
row· row-reverse· column· column-reverse flex: initial; ⇢ flex: 0 1 auto;

flex: auto; ⇢ flex: 1 1 auto;

justify-content flex: none; ⇢ flex: 0 0 auto;

flex-start· flex-end· center· space-between· space-around flex: value; ⇢ flex: value 1 0;
align-items order
flex-start· flex-end· center· stretch· baseline 0· 1· 2· …

align-content align-self
flex-start· flex-end· center· stretch· space-between· space-around auto· flex-start· flex-end· center· stretch· baseline

Chrome 20- (old)


internet explorer bugs

browsers support
don’t do min-width | min-height

priority prevalence
1
21+ (new)
Safari 3.1+ (old)
 2 max-width | max-height
.parent { flex: 1;} .parent { flex: 1 1 0%;} IE10-11
6.1+ (new)

Firefox 2-21 (old) 3 flex-wrap
.parent { flex: 1 1 0;} .parent { flex: 1 1 0%;} IE10 22+ (new)
Internet 10 (tweener) 4 flex-grow | flex-shrink
.inline-child { …} .inline-child { display: block;} IE10-11 Explorer 11+ (new)
Android 2.1+ (old) 5 flex-basis: value;
flex-basis: value;
 width|height: value;
 4.4+ (new)
IE10-11
box-sizing: border-box; box-sizing: border-box iOS 3.2+ (old) 6 width: value;
7.1+ (new)
flex-basis: calc(value); width|height: calc(value); IE10-11 Opera 12.1+ (new) 7 flex-basis: auto;
https://github.com/philipwalton/flexbugs

option 1 : flexible children option 2 : space-between

mono-line grid

without gutters: .parent { .children { without gutters: .parent { .children {

display: flex; flex: 1 1 0%; display: flex; width: calc(100% / 3);
} } } }

.parent { .children { .parent {

with gutters: with gutters:
display: flex; flex: 1 1 0%; display: flex;
} } justify-content: space-between;
}
.parent > *:not(:first-child) {
margin-left: gutter; .children {
} width: calc(100% / 3 - gutter / 2);
}

media object center everything

patterns

Lorem Elsass Ipsum mitt

.parent { .content { .parent {
picon bière munster du display: flex; flex: 1 1 0%; display: flex;
ftomi! Ponchour bisame.
Bibbeleskaas jetz align-items: flex-start; } justify-content: center;
rossbolla sech
choucroute un schwanz. } align-items: center;
}

modifiers: .parent--reverse { .figure--center { alternative: .parent { .children {

flex-direction: row-reverse; align-self: center; display: flex; margin: auto;
} } } }

english flex-container
unapplied properties
resources

• Awesome Flexbox: https://github.com/afonsopacifer/awesome-flexbox • column-*

• A complete guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-item
• Flexbox Patterns: http://www.flexboxpatterns.com/
• float
francophone • clear
• Flexbox Layout : http://kiwi.gg/flexbox • vertical-align
• Flexbox, guide complet : https://la-cascade.io/flexbox-guide-complet/ • ::first-line· ::first-letter
• Livre « Flexbox, plongez dans les CSS modernes » : http://goetter.fr/livres/flexbox/