Flex properties, all in one page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; display: [flex || inline-flex ] flex-direction: [row || row-reverse || column || column-reverse]; flex-wrap: [nowrap || wrap || wrap-reverse]; /*flex-flow is a shorthand for the flex-direction & the flex-wrap .*/ flex-flow: && justify-content: [flex-start || flex-end || center || space-between || space-around]; align-items: [flex-start || flex-end || center || baseline || stretch]; align-content: [flex-start || flex-end || center || space-between || space-around || stretc]h; } .item { -webkit-box-ordinal-group: [number]; -moz-box-ordinal-group: [number]; -ms-flex-order: [number]; -webkit-order: [number]; order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: auto | |; /* default auto */ /*flex is a shorthand for the flex-grow, flex-shrink & the flex-basis .*/ -webkit-box-flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]; -moz-box-flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]; -webkit-flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]; -ms-flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]; flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]; align-self: auto | flex-start | flex-end | center | baseline | stretch; } |
