CSS Flexbox or the CSS Flexible box was introduced in CSS3 as a new layout mode to predict the behavior of the elements when used with different screen sizes and display devices. Thus the layout, alignment, and distribution space are efficiently used among items of a container. The width and height of an element can thus be changed to the best fit for the available space and is thus favored over the block model. Flex containers and flex items are a part of the CSS Flexbox.
Flex container:
The properties of a parent element are defined by the flex container. The display property of the element is set either as flex or inline-flex to declare a flex container.
Flex items:
The properties of a child element are defined by the flex items. A flex container can have multiple flex items inside it.
The way of setting the flex items inside a flex container is defined by the CSS Flexbox. The flex items are set along a flex line inside a flex container. In a flex container, there is only one flex line by default. The elements outside a flex container and inside a flex item behave as usual.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: crimson;
}
.flex-container > div {
background-color: wheat;
margin: 10px;
padding: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>
Explanation:
In the above example, we are presenting three flex items set along the horizontal flex line, from left to right within a flex container.
To change the direction of the flex line:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: crimson;
}
.flex-container > div {
background-color: wheat;
margin: 10px;
padding: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>
Explanation:
In the above example, we are using the direction property to set the direction of the flex line from right to left. Here, the row-reverse value sets the direction of the flex line from right to left. Similarly, the column-reverse value can be used to set the direction of the flex line from bottom to top when the items are stacked vertically.
CSS3 Flexbox Properties:
All the popular CSS3 flexbox properties are listed below:
| Property | Uses |
| display | To define the type of box used for an HTML element. |
| flex-direction | To define the direction of the flexible items inside a flex container. |
| justify-content | To define the alignment of the flex items horizontally if the items do not use the entire available space on the main axis. |
| align-items | To define the alignment of the flex items vertically if the items do not use the entire available space on the main axis. |
| flex-wrap | To define whether the flex items should wrap or not, when there is no more space available for them on one flex line. |
| align-content | To define the behavior of the flex-wrap property. |
| flex-flow | To define a shorthand property for flex-direction and flex-wrap. |
| order | To define the order of a flexible item as per the rest of the flex items of the same container. |
| align-self | To override the align-items property of a container. |
| flex | To define the length of a flexible item as per the rest of the flex items of the same container. |
Supporting Browsers:
The browsers supporting the CSS3 flexbox properties are listed below:
| Property | IE | Chrome | Firefox | Safari | Opera |
| basic support
(single-line flexbox) |
11 | 29.0
21.0 -webkit- |
22.0
18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| multi-line flexbox | 11 | 29.021.0 -webkit | 28 | 6.1 -webkit- | 17.0
15.0 -webkit- 12.1 |