Once you've set flex or inline-flex onto an element, it becomes a "flex container", and therefore, all children elements inside it are now "flex items". Many properties are placed on the flex container to dictate what the flex items will do.
Flex items will all run along the same axis on one line. So if you have three flex items, they will run horizontally in a row, or vertically in a column. The property flex-direction dictates which way the flex items will run.
|
<style> <div class="container1"> |
|
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
|
| Value | Effect |
|---|---|
| row | flows horizontally (default) |
| row-reverse | horizontal, but in the reverse direction of "row" |
| column | flows vertically from top to bottom |
| column-reverse | flows vertically from bottom to top |
