-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
* { box-sizing: border-box; } body { margin: 0; padding: 0; }
include display: flex
to actiate
flex-direction
: row, column, row-reverse, column-reverse
flex-wrap
: nowrap, wrap, wrap-reverse
justify-content
: along the primary axis
flex-start, flex-end, center, space-between, space-around, space-evenly
align-items
: along the secondary axis
stretch, flex-start, flex-end, center, baseline (like flex-start with no content)
flex-flow
: flex-direction flex-wrap (shorthand)
align-content
: only works for multiline flexible containers with wrap property on
flex
: grow, shrink, basis flex: 0 1 auto;
flex-basis: auto
means "look at my width & height property" / content
was introduced for automatic sizingflex-basis: 0
would collapse the content into the smallest possible width (image too) order
: re-orders select items - -1 (front), 0 (as is), 1(back) align-self
: overrides align-items for this single item/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Automatically size based on the flex item's content */
flex-basis: content;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;