## Flex Container Properties ![[flexbox_flex-container.png]] ```css .container { display: flex; /* or inline-flex */ } ``` ### flex-direction ![[flexbox_flex-direction.png]] ```css .container { flex-direction: row | row-reverse | column | column-reverse; } ``` ### flex-wrap ![[flexbox_flex-wrap.png]] ```css .container { flex-wrap: nowrap | wrap | wrap-reverse; } ``` ### justify-content ![[flexbox_justify-content.png]] ```css .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly } ``` ### align-content `align-content` is for multi-line flexible boxes (it has no effect when items are in a single line) ![[flexbox_align-content.png]] ```css .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch; } ``` ### align-items The `align-items` property aligns the items inside a flex container along the cross axis ![[flexbox_align-items.png]] ```css .container { align-items: stretch | flex-start | flex-end | center | baseline; } ``` ## Flex Item Properties ![[flexbox_flex-items.png]] ### align-self ![[flexbox_align-self.png]] ```css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ``` ### order ![[flexbox_order.jpg]] ```css .item { order: 5 /* default is 0 */ } ``` ### flex-shrink, flex-grow, flex-basis ![[flexbox_flex-shrink-grow-basis.png]] ```css .item { flex-shrink: 1; /* default is 0 */ flex-grow: 2; /* default is 0 */ flex-basis: 50px; /* default auto */ } ``` ___ See: [Flexbox Playground](https://codepen.io/drthey/full/zYeLmvX)