html

Flex Container in CSS | Explained

Flexbox layout model provides an efficient and dynamic arrangement of elements by placing them inside a container with equally distributed space. This layout makes elements responsive which means that the elements change their behavior according to the kind of device displaying them. It consists of two components which are, flex container and flex items. However, here we will only emphasize flex containers. Subjects discussed are.

  1. What is a Flex Container
  2. Flex Container Properties

What is a Flex Container?

This is a component of a flexbox that defines the properties of the ancestor element by setting its display to flex or inline-flex.

Properties associated with the flex container are explained here.

Flex Container Properties

Properties related to a flex container.

  1. flex-direction property
  2. flex-wrap property
  3. flex-flow property
  4. justify-content property
  5. align-items property
  6. align-content property

These properties are explained in detail below.

flex-direction property

For the purpose of setting the direction of elements present in a flexbox, the flex-direction property is used.

Syntax

flex-direction: row | row-reverse | column | column -reverse | initial | inherit;

Parameters explained

row: This default value arranges the elements horizontally.

row-reverse: This value places elements in a row but with a reverse direction.

column: It arranges the items vertically.

column-reverse: It arranges the elements in a column but in a reverse manner.

Example

The example below demonstrates the working of the flex-direction property.

HTML

<div class="flexbox">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Here we have nested four div containers inside a larger div container and assigned it a class “flexbox”.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  flex-direction: row-reverse;
}

In the above code, we are displaying the larger div as a flex container and giving it some color, and lastly its direction is set to row-reverse.

CSS

.flexbox div  {
  background-color: lightgrey;
  width: 150px;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
}

Now we are styling our items inside the container using various CSS properties.

Output


The flex-items are placed in the same row but in reverse order.

flex-wrap property

This property states whether the elements should be wrapped around the flex line or not.

Syntax

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Parameters explained

nowrap: This default value does not wrap elements.

wrap: It wraps the elements if required.

wrap-reverse: It wraps the elements if required but in a reverse fashion.

Example

Here is how this property wraps items inside the flexbox. To see the effect of this property, you have to resize the browser window.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  flex-wrap: wrap;
}

In the above code, we have set the flex-wrap property to wrap. This value wraps the items inside a container.

CSS

.flexbox div  {
  background-color: lightgrey;
  width: 150px;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
}

Using some basic CSS we have styled our flex items.

Output


The flex items have been wrapped.

flex-flow property

It states the direction of elements while specifying whether to wrap elements or not. This is a shorthand property for flow-direction, and flow-wrap.

Syntax

flex-flow: flow-direction flow-wrap | initial | inherit;

Parameters explained

flow-direction: It defines the direction of elements.

flow-wrap: It states if the elements should be wrapped or not.

Example

Consider the example below to understand the working of this property.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  flex-flow: row-reverse wrap;
}

Using the shorthand property, we have set the direction of the flex items as row-reverse while wrapping them using the wrap value.

Output


The items have been wrapped in rows in a reverse fashion.

justify-content property

If the items in a flexbox do not consume the horizontal space entirely then the justify-content property aligns them across the main-axis.

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

Parameters explained

flex-start: It positions elements at the start of the container and is the default value.

flex-end: This places the elements at the end of the container.

center: This positions the elements at the center of the container.

space-between: It adds space between items.

space-around: It adds spaces before, between, and after each item.

space-evenly: This gives each item equal spaces.

Example

Suppose you want to justify your content to the end of the flex container.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  justify-content: flex-end;
}

The flex-end value will position all the flex items in the end of the container.

Output


The property is working properly.

align-items property

This property sets the arrangement of elements in a container vertically.

Syntax

align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

Parameters explained

stretch: It is a default value that stretches the items to fit in the container.

center: This positions the elements at the center of the container.

flex-start: It positions elements at the start of the container and is the default value.

flex-end: This places the elements at the end of the container.

baseline:  This positions the elements at the baseline of the container.

Example

Here we are demonstrating the center value of the align-items property.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  height: 200px;
  align-items: center;
}

To demonstrate this property properly we are providing some height to the flex container and setting the align-items property to center.

Output


The items have been aligned vertically in the center of the container.

align-content property

It alters the behavior of the flex-wrap property and is pretty much similar to the justify content property with the only difference being that it aligns the flex elements veritcally.

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

Parameters explained

flex-start: It positions elements at the start of the container and is the default value.

flex-end: This places the elements at the end of the container.

center: This positions the elements at the center of the container.

space-between: It adds space between items.

space-around: It adds spaces before, between, and after each item.

space-evenly: This gives each item equal spaces.

Example

To understand how the align-content property works see the example below.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  height: 300px;
  flex-wrap: wrap;
  align-content: space-around;
}

Here we have further increased the height of the container so that you can understand this property in a better way. Lastly, we have assigned the align-content property the space-around value.

Output


Space around each item vertically was added successfully.

Conclusion

Flex container which is a component of a flexbox defines the properties of the ancestor element by setting its display to flex or inline-flex. CSS provides many properties that are connected to the flex container and can be used to define the characteristics of the flex container. Few of the properties linked to the flex container are; flex-direction, align-content, align-items, flex-flow, etc. Each of these properties is explained in detail along with relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.