CSS Flexbox layout model | Explained

CSS 3 offers a web layout model named CSS Flexbox Layout model or Flexbox. As the name itself suggests, the flexbox layout allows us to create flexible/responsive elements within a container that can be arranged automatically depending upon screen size. All in all, the CSS flexbox layout model makes it possible to design flexible responsive layouts.

This write-up will assist you in the following aspects of the CSS flexbox model:

So, let’s begin!

What is CSS Flexbox Layout Model

It is a flexible layout module available in CSS3 that offers a simple and clear way to arrange flex elements inside a container. It assists us in designing the responsive layout.

What is a CSS Flex Container

In order to work with the flexbox Model, first we need to understand what a flex container is and to do so, let’s consider the below-given figure:

In the above snippet, the gray area represents a flex container while item 1, item 2, etc. are its items. So, we can say that the flex container is a box/container that can hold multiple flex items.

Features of Flexbox Model

The CSS flexbox layout model provides numerous features, some of them are listed below:

  • In the CSS flexbox layout model, there are no floats.
  • CSS Flexbox provides a responsive and mobile-friendly layout.
  • The margins of the flex container don’t collapse with its content’s margins.
  • Positioning the child element is very easy in the flexbox model.
  • The element’s order can be changed easily without editing the source HTML.

Basic Concept of CSS Flexbox Layout Model

Some of the basic concepts of the CSS flexbox layout model are listed below:

  • The CSS flexbox model has the ability to alter the element’s height and width to the best fit within the container’s available free space.
  • Flexbox is direction-agnostic which means elements of the flexbox can be arranged horizontally as well as vertically depending upon the requirements.

Flexbox Properties

To design a responsive layout, a vast range of flex properties is available in CSS3 as described in the below-given tables:


Properties Description
display Determines the type of flex container, i.e., inline, block.
flex-direction Specifies the direction of items within the container such as top-bottom, left-right, etc.
flex-wrap Determines whether the items should be wrapped or not.
flex-flow Provides the functionalities of both flex-wrap and flex-direction.
justify-content It aligns the items/elements along the main-axis.
align-items It aligns the elements along the cross axis.
align-content It aligns the lines of the flex container.
gap Explicitly controls the spaces between the flex items.


Properties Description
order It controls the order of child elements within the flex container.
flex-grow It determines the growth factor for a flex item.
flex-shrink It determines the shrink factor for child elements/flex items.
flex-basis It determines the default size of the child element/flex item.
flex It is used to achive the functionalities of three properties i.e. flex-grow, flex-shrink, and flex-basis.
align-self It enables default alignment(along the cross-axis) to be overridden for individual child element.

The properties described in Table 1 are known as flex container or parent element properties, while those described in Table 2 are known as flex items or child element properties.


In this section, we will implement the above-described flexbox container and flexbox items properties practically.

    .container-class {
      background-color: red;
      align-items: stretch;
      flex-direction: row-reverse;
      gap: 5px 50px;
    .container-class > div {
      background-color: pink;
      margin: 8px;
      padding: 10px;
      font-size: 15px;

<h2>Flexbox Example</h2>

<div class="container-class">
    <div>First Item</div>
    <div>Second Item</div>
    <div style="flex-grow: 2">Third Item</div>
    <div>Fourth Item</div>
    <div>Fifth Item</div>

In the above code snippet, we utilized various flex container and flex item properties such as display, flex-direction, align-items, gap and flex-grow which will set the flex display, row-reverse direction, stretched alignment, 5px rows and 50px columns gap respectively, and the third item will grow two times faster than other elements:

The output verifies the working of CSS flexbox properties.


The CSS flexbox model offers an easy and clean way to arrange flexbox items inside a container. It provides numerous features such as responsive design, simple alignment of elements, etc. Moreover, numerous properties can be used to design and align the items in a better way, such as flex-direction, flex-wrap, align-items, order, flex-grow, etc. This article discussed the flexbox layout model, flex container, and their properties.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.