Flexbox Container
A flex container only becomes visible after setting the display property to “flex” this would look like this:
.flex-container {
display: flex;
}
After this you can add different flex properties to adjust the design of your flex items and how they are displayed.
Flexbox Container Direction
Flex-direction is a property that defines the direction in which the container stacks the flex items. Column is used to stack the items vertically from top to bottom and would look like this:
.flex-container {
display: flex;
flex-direction: column;
}
Reverse-column is used to stack the items vertically but from bottom to top and would look like this:
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Row is used to stack the items horizontally from right to left and would look like this:
.flex-container {
display: flex;
flex-direction: row;
}
Row-reverse is used to stack the items horizontally but from left to right and would look like this:
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Flex Grow Property
Flex items can be coded to change in size based on the specific item. Flex-grow specifies how much an item grows in relation to the other items. For example if you want the second item to grow 5x the size of item one the code would look like this:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 5">2</div>
</div>