Understanding Layout property display-flex in CSS

Display flex CSS

I am again working with CSS after a long time. My experience with CSS classes is kind of good and bad. And again I needed to revise display: flex the property in CSS. This single property has so many components and it is so flexible that it helps a developer so many times in arranging the elements on a web page very effectively. In this article, I will be sharing all the components of d-flexlayout property. One can try and play with examples here.

Flex Container:

A container element that has the display: flex property set on it becomes a flex container. All the direct child elements of this container become "flex items". The code below is an example

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.container {
  display: flex;
}

Flex Direction:

The flex-direction property determines the direction in which the flex items are arranged within the flex container. The default value is, which arranges the flex items in a horizontal row. You can also set it to, arranges the flex items vertically. Here's an example:

.container {
  display: flex;
  flex-direction: column;
}

Justify Content:

Get Amit Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The justify-content property controls how the flex items are aligned along the main axis of the flex container. You can use this property to align the items to the start, end, center, or evenly spaced.

.container {
  display: flex;
  justify-content: center;
}

Align Items:

The align-items property controls how the flex items are aligned along the cross-axis of the flex container. So, if one considers container area on a plain cross axis can mean the x-axis. You can use this property to align the items to the start, end, center, or evenly spaced.

.container {
  display: flex;
  align-items: center;
}

Flex Wrap:

The flex-wrap property determines whether the flex items should wrap to a new line if there is not enough space within the flex container. You can set it to wrap or nowrap.

.container {
  display: flex;
  flex-wrap: wrap;
}

Flex Grow and Shrink:

The flex-grow property controls how much a flex item can grow when there is extra space available within the flex container. The

flex-shrink property controls how much a flex item should shrink when there is not enough space available.

.item {
  flex-grow: 1;
  flex-shrink:

Above are all the components of laying property display: flex. You can play with all the examples here.