## CSS Flexbox 🔹 [[⧋ CSS]] ▫️ [[CSS Grid]], [[+ Projects/Online Courses|Courses]] ### Overview ![](https://i.imgur.com/DU5aCrp.png) ### Links [Flexbox Zombies](https://mastery.games/flexboxzombies/) ### Notes Steps: - **display: flex**: First define the `display` property as `flex` in the parent containter; - **flex-direction**: Figure out the direction of the line; - **justify-content**: Define the alignment of the items in the line; - **Align-items** - where is it on the line? ### Parent Container properties **flex-direction** is going to tell if my alignment is either (`row` is default) - `row` - horizontal from left) - `row-reverse` - horizontal from right - `column` - vertical from top - `column-reverse` - vertical from bottom **justify-content** - describes the alignment of the line I'm on (`flex-start` is default) - `flex-end` - End of a line. - `flex-start` - Beginning of a line. - `center` - Center of a line. - `space-between` - space between but not space around. - `space-around` - even amount of space between items. **align-items** - defines the positioning on a line perpendicular to the direction (`stretch` is default) - `flex-start` - top (row) or left (column) - `flex-end` - bottom (row) or right (column) - `stretch` - top to bottom (row), left to right (column) - `center` - directly along center of line; ### Child container properties **align-self** - defines the positioning of a single child element - Same properties as **align-items** but just for individual items. - Can target either with classes or with `:nth-child(n)` or `:nth-of-type(n)` psuedo-selectors. - Try to first target the majority of items with **align-items** and just use **align-self** for individual items (or mulitple with a class). **flex-grow** - defines the space that individual items will stretch to fill available space (ratio). **justify-content** won't work if there is growing and no wrapping. - `0` - doesn't grow at all as space stretches. - `1` - grows to fit space at a normal rate. - `2` - grows to fill 2 times as much space as `1` - `3` - grows to fill 3 times as much space as `1` - First define children to grow with 1, then define non-growing items as 0. **flex-shrink** - describes out items react when there's not enough space for all to fit. It's a ratio so if all items are the same, they will shrink the same. - It only works once the containing space is too small to fit all the items. - If one is set to `1`, and another is set to `2`, the second one will shrink twice as much. - If set to `0`, it won't shrink no matter what. - Set **flex-grow** for when there is plenty of space and **flex-shrink** when space runs out. - It seems that in most cases the number shouldn't need to go above `2`, if something needs to take up more space you can set other values to `0` instead. **flex-basis** is similar to the `width` and `height` property and will override either, depending on the direction. - Default is `auto`. - **min-width** acts as a lower limit for **flex-basis**, and it will accept the **min-width** property first. - **max-width** acts as a upper limit for **flex-basis**, and it will accept the **max-width** property first. - They only get enough space as allowed, so if it's smaller than property given, it will just take as much space as it can. - *Good to remember:* **flex-basis** is just hypothetical size before any growing or shrinking begins. **flex-wrap** determines how containers will act once space runs out. - `wrap` will make sure they all move to new lines once space runs out. - With **flex-grow** on a child, items will expand to fill the second line. - Setting **flex-shrink** will cause children to shrink after they have wrapped (wrap first, shrink second). - Setting **justify-content** will determine how the wrapped items align on the new line. - Setting **flex-basis** will set a width for a container once wrapping has occured. - `wrap-reverse` will make it so that the overflow line will go to the top instead of the bottom. It will reverse the **align-items** setting. - `nowrap` is the default setting which causes no items to wrap to a new line. ### Related [[CSS Grid]] [[+ Projects/Online Courses|Courses to complete]] ### References [1] [Flexbox Zombies](https://mastery.games/flexboxzombies/) [2] [A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)