A key feature of flexbox is the ability to align and justify items on the main and cross-axes, and also to distribute space between flex items. So, what are these flex items? Any button, text or element added into a flexbox is known as flex item.
The elements added into a flexbox will become more flexible! That is, we can control their alignment (horizontal or vertical), how much they can shrink, grow and the spacing between these elements. Now let's move on.
The Flex Direction
As the name itself indicates, this feature of a flex helps you to decide the direction of your flex. In the image given below, you can find that there are 4 direction options for your flexbox.
1. left to right
2. top to bottom
3. right to left
4. bottom to top
You can choose the direction and the elements inside the flexbox will align accordingly! Such an obedient group!
The Flex Wrap
The flex wrap is a feisty boss which decides whether the flex items are forced to a single line or can be flowed into multiple lines. It wraps your elements the way you want them to be.
Justify Content
This feature of your flexbox allows the items to align along the direction you choose. For example, let’s choose the left to right alignment. We use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis/flex direction. You have multiple options to place your contents, like;
1. Flex start – Items are positioned at the beginning of the container.
2. Flex end – Items are positioned at the end of the container
3. Flex centre – Items are positioned at the centre of the container.
4. Place in-between – Equal space between the items will be allocated
5. Place around – Items will have space before, between, and after them.
6. Place evenly – Items will have equal space around them.
Align Items
This feature aligns multiple lines of items on the cross axis, i.e this property specifies the default alignment for items inside the flexible container. Imagine a horizontal flexbox layout. That horizontal flow is the main axis, so align-items is used to align the elements inside to the opposite axis. Here also, you can find multiple options to align as in justify content.
1. Fit to the container
2. Align at the beginning
3. Align at the end
4. Align at the centre
5. Align at baseline