CSS Flexbox

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 is 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>

Output:

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>

Output:

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 avaiable 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 browser 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

Please Share