The Various Features Of CSS Flexbox
What is CSS Flexbox?
CSS Flexbox or Flexible Boxes is a new feature introduced by CSS3 which helps us in arranging, aligning contents, and distributing space to them in our container or a web page efficiently and easily.
How is it used?
Firstly, we give our parent container of flex-items the property of display and assigning the value flex in our CSS.
Flexbox works mainly based on two axis named:
- main-axis:this is the primary axis along which the flex items are laid out (as rows across the page or columns down the page).
- cross-axis:this is the axis perpendicular to the main-axis.
Note: The direction/position of the cross-axis would change depending on the direction of the main-axis & vice versa.
To specify the the main-axis, flex-direction with the value row(default) or column is used. The values row-reverse and column-reverse can be used too.
Sometimes when the items are too many in number or large enough not to fit in a single row, they get shrunk which affects their individual widths. To avoid this flex-wrap property is used inside our CSS.
flex-wrap property takes three values which are:
- nowrap: It is the default value.
- wrap: It splits items into two or more rows from left to right.
- wrap-reverse: Splits items from right to left if they are in a row or bottom to top in a column.
Order
Flex items have an initial order to them which can be overridden by the order property. Works on the individual items.
Flex-basis
It is used to set the initial size of the item.
Flex-grow and Flex-shrink
These are properties given to a flex-item that causes them to grow/shrink in the container. They decide what amount of remaining space an item should take up (grow) or amount of overflowing space is taken away from the item (shrink).
So far we have seen the properties which help us change the layout of the web page. Now onto the properties used to align the items.
Justify-content
It aligns the flexbox items relative to the main axis. These are the following values that can be assigned using this property.
- flex-start (default): aligns the flex-items to the start (left) of the flex container (or top in the case of column).
- flex-end: aligns the items to the end (right) of the flex container.
- center: aligns the items in the center.
- space-between: aligns the elements to the center of the main axis with spaces between items. The first and last elements are pushed to the end.
- space-around: similar to space-between but the first and last elements are not attached to the ends and the items have less even spaces between them.
- space-evenly: similar to space-around but more space at the ends and even fewer spaces between the items.
Align-items
It aligns the flexbox items relative to the cross axis. These are the following values that can be assigned using this property.
- flex-start: aligns items to the start of the container.
- flex-end: aligns items to the end of the container.
- center: aligns them to the center of the container.
- stretch (default): items are stretched to fill out the whole container.
- baseline: baseline is the line letter sits on.
The properties above can only be used to change the alignment of all the items together. But to do so individually, the property named align-self is used.
Align-self
It is used individually in every item’s CSS. All the values mentioned in the align-items property can be used in align-self. Also, it overrides the default alignment or the effect of the align-items property.
This was all about the CSS Flexbox, thanks for reading.
