Khushi Chauhan's Blog
A complete guide to Flexbox in CSS

A complete guide to Flexbox in CSS

Khushi Chauhan's photo
Khushi Chauhan
·

4 min read

Table of contents

The flexible box module, also referred to as flexbox helps us in designing a responsive website. To start using the flexbox model, we need to first define a flex container.

image.png

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

The element above represents a flex container(blue area) with three flex items in it.

Flexbox Properties:-

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

display:-

The flex container becomes flexible by applying display property to flex.

<style>
        .container{
            height: 100%;
            display:flex;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
            height: 200px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

flex-direction:-

The flex-direction property defines in which direction the container wants to stack the flex items. Here, we can use four values like row, row-reverse, column, column-reverse.

<style>
        .container{
            height: 100%;
            display:flex;
            flex-direction: row;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
            height: 200px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

flex-wrap:-

The flex-wrap property defines whether the flex items should wrap or not. Here, we can use two values like wrap, nowrap.

<style>
        .container{
            height: 100%;
            display:flex;
            flex-wrap: wrap;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

flex-flow:-

The flex-flow property is a shorthand property to set both flex-direction and flex-wrap properties.

<style>
        .container{
            height: 100%;
            display:flex;
            flex-flow: column wrap;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

justify-content:-

The justify-content property is used to align the flex items. We can use different values like center, space-around, space-between, flex-start, flex-end. The center value aligns the flex items in the center of the container.

<style>
        .container{
            height: 100%;
            display:flex;
            flex-flow: column wrap;
            justify-content: center;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

align-items:-

The align-items property is used to align the flex items. We can use different values for align-items like center. flex-start, flex-end, stretch, baseline.

<style>
        .container{
            height: 100%;
            display:flex;
            flex-flow: column wrap;
            align-items: center;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

align-content:-

The align-content property is used to align the flex lines. We can use different values like space-between, space-around, stretch, center, flex-start, flex-end. 

<style>
        .container{
            height: 100%;
            display:flex;
            flex-flow: column wrap;
            align-items: center;
            align-content: space-between;
        }
        body{
            height: 100vh;
        }
        img{
            width: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
        <img src="https://images.unsplash.com/photo-1500576992153-0271099def59?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHN0aWNrZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="help corner">
    </div>
</body>

image.png

How to center a flex item ?

Solution:- The famous problem to center a flex item can be solved by using the flex-box properties. We just need to set properties for the container according to the flexbox and it will be all centered. We can do so by setting display:flex, justify-content:center, align-items:center

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

image.png

Thank you for reading this article. Please like, comment and share your valuable feedback.

#iNeuron #HiteshChaudhary #WebDev #Javascript #LCO #LearnCodeOnline #LCO #css #learncodeonline #cssselectors @hiteshchoudharylco code with hitesh choudharyflexboxiwritecodeineuronHTML5