Flexbox Box Module or CSS Flexbox is a one-dimensional layout method used for arranging elements in rows or columns. That means CSS flexbox at a time can deal with a one-dimensional layout either it can be row or column. The main aim of the flexbox is to layout, align and fill the available space among the container even if the size is unknown to make a layout responsive. A flex container expands or shrinks elements to fill the available space or to avoid overflow. In this article, we will discuss CSS flexbox and its properties.
I. Why flexbox?
Before flexbox, the only properties for creating cross-browser compatible CSS layouts were floats and positioning. These properties were limiting and frustrating as many layout designs are either difficult or impossible to achieve.
Following layout designs were impossible or difficult to achieve with :
- Vertically centering of a child block inside its parent block.
- Equal spacing between all the children elements of a container, regardless of how much width/height is available.
- Even height of all columns in a multiple-column layout irrespective of the amount of content they contain.
II. CSS Flexbox Properties
1. flex-direction
Flex-direction property defines in which direction the flex items should distribute in the container.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- column: This value places the flex items vertically, i.e., from top to bottom.
- column-reverse: This value places the flex items vertically but in reverse, i.e., from bottom to top.
- row: This value places the flex items horizontally, i.e., from left to right.
- row-reverse: This value places the flex items horizontally but in reverse, i.e., from right to left.
2. flex-wrap
By default, all flex items try to fit onto one line but using the flex-wrap property; we can define whether the flex items should wrap or not.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- wrap: This value will wrap the flex items onto multiple lines from top to bottom.
- no-wrap: This is the by default value, and in this, all flex items will appear onto one line.
- wrap-reverse: This value will wrap the flex items onto multiple lines but from bottom to top.
3. flex-flow
Flex-flow property is the shorthand property for flex-direction and flex-wrap. It allows you to set both flex-direction and flex-wrap together at the same time.
The default value for this property is row nowrap.
.container {
flex-flow: column wrap;
}4. justify-content
Justify-content property aligns the flex items. It allows you to distribute leftover space or control over flex item’s alignment when they overflow from the container.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end |
left | right ... + safe | unsafe;
}
- flex-start: Packs the flex items to the start of the flex-direction.
- flex-end: Packs the flex items to the end of flex-direction.
- start: Packs the flex items toward the start of the writing-mode direction.
- end: Packs the flex items towards the end of the writing-mode direction.
- left: Packs the flex items towards the left side of the container.
- right: Packs the flex-items towards the right side of the container.
- center: Places the flex items in the center along the line.
- space-between: Places the flex items evenly; so that the first item is on start, and the last item is on end.
- space-around: Places the flex items evenly with equal space between them. But visually, the spaces are not equal since every item has equal margins on both sides.
- space-evenly: Distributes the Flex items space evenly so that the spacing between two items is equal.
5. align-content
Align-content property, just like justify-content, aligns the flex items.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start |
end | self-start | self-end + ... safe | unsafe;
}
- normal: Flex items are placed in their default positions as if no value is set.
- flex-start: Packs the flex items to the start of the flex-direction.
- flex-end: Packs the flex items to the end of flex-direction.
- start: Packs the flex items toward the start of the writing-mode direction.
- end: Packs the flex items towards the end of the writing-mode direction.
- center: Flex items are placed in the center along the line.
- space-between: Flex items are placed evenly; the first item is on start, and the last item is on end.
- space-around: Flex items are placed evenly with equal space between them. But visually, the spaces are not equal since every item has equal margins on both sides.
- space-evenly: Flex items space is distributed evenly so that the spacing between two items is equal.
- stretch: Items stretch to take up the leftover space.
6. align-items
Align-items property aligns the flex lines. It defines how the flex items should distribute vertically on the current line. It is the justify-content version for the vertical or cross axis.
- stretch: Flex items are stretched to take up the leftover space.
- flex-start/start/self-start: Flex items are placed at the start of the vertical or cross axis.
- flex-end/end/self-end: Flex items are placed at the end of the vertical or cross axis.
- center: Flex items are placed in the center along with the cross or vertical axis.
- baselines: Flex items are aligned such as their baselines align.
III. Conclusion
Hopefully the above write-up was enough to clear all your doubts about CSS flexbox and its properties. However, in our upcoming blog, we will cover properties for the children i.e. the flex items properties. Also, if you have any questions or suggestions, you can write us in the comment section below.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
