Flexbox helps you to align elements. It’s much easier and better than Float etc
Flexbox is generally used for small-scale layouts, whereas Grid is used for larger stuff.
Flexbox has 2 axes. The main axes and the cross axes.
The main axis is defined by the flex-direction property.
The cross axis will automatically run perpendicular to the main axis.
Flexbox Main Axis
The main axis is defined by flex-direction.
Flex-direction has 4 possible values:
- Row
- Row-reverse
- Column
- Column-reverse
In the screenshot below,
display:flex makes container-1 a flex item
flex:1 – for each of the boxes, makes them evenly distributed in terms of their width. As all the flex items are given a value of 1, they are all the same size.
If you were to change the flex value for .box-1 to 4, then box-1 would take up four-sixths (4/6) of the page:
Change the order of Flex Items
With flexbox you can change the order of the flex-items, (the boxes) without changing the HTML.
To do this use the “order” property.
The code below will put box-1 in the second position, left to right.
Flex-direction: Column
By giving the container the flex-direction property, with a value of “column”, the boxes / flex items will stack on top of each other
Justify-Content
You can use the “justify-content” property to align the boxes within the flex container.
justify-content: flex-end; will push all the flex items to the right
Justify-content:center; will place the boxes in the center of the container
Justify-content:space-between;
Aligns the content spaced evenly across the entire width of the container, with margins in between:
Space-around will add some “space around” the items, so that they have margins in between the items and also to the sides of the left-most and right-most items:
Flex Grow
If after the dimensions of the flex-items have been set, they leave room or space, you can use the “flex-grow” property.
If you give each flex item a flex grow value of 1, then the items will take up an equal amount of the remaining space.
It could be 1, or 100, it won’t make a difference if all the items have the same value.
Below, flex item “one”, is the only flex item with a “flex grow” property, and it therefore takes up all the space that was left over from left to right by the 3 boxes.