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
dont 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 bire 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/