Day 10 - CSS flexbox
by Nino · 25 things on Twos
- all this learning with layout fundamentals when flexbox is actually better and more powerful? 💀
- must have a parent element with child elements
- parent element:
<div class="container">
.container {display: flex;}
- flex container, flex items
<div class="items">
- by default, flexbox tries to fit items inside a container on only one row
- display: flex; affects inline and block elements the same
- flex-direction: row;
Flexbox elements have this value even if we don't code it.
- cross axis - an imaginary line perpendicular to the main axis
- justify-content: center; = can help center child elements within a parent element
- justify-content: flex-end; = can help place child elements at the end of the parent element
- ---
- Flex direction
- display: flex;
- flex-direction: row;
- flex-direction: row-reverse;
- flex-direction: column;
- flex-direction: column-reverse;
- Justify flex items
- justify-content: center;
- justify-content: flex-end;
- align-content: center;
- ---
- Mimo: semi-completed (10. CSS Flexbox Basics)