What is Flexible box or Flex box in CSS?

Flexible or Flex box in CSS

Flexible box also known as Flex box is a new model of arranging elements of your website in multiple rows and columns without using percentage and fixed length values. The flex box model provides a simple and powerful mechanism for handling the distributed space automatically throughout the style sheet. It also align content without disturbing actual markup.

Before the existence of flex box, we had some others properties like block for section, inline for text, tables for two dimensional data representation and explicit position of elements in CSS. But with the invent of flex box, it has become easy for us to represent elements of our web page in a flexible way. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

The flex-container can be created by setting its display as flex or inline-flex. The sub items of flex-container automatically becomes flex-items and will be laid out using the flex layout model. By default, the flex direction is row for all flex-items. The flow of flex-items can be specified by flex-direction property. You can also make flex-direction as column by setting flex-direction as column.

flex box in CSS, www.programmingtutorial.in
Figure A

The above figure shows three flex items with flex-direction property applied as row. All these items are placed inside main flex-container.

The flex box can take the following properties:

  • flex-direction
  • flex-wrap
  • flex-flow
  • Aligning flex items within flex container

flex-direction in CSS

The flex-directions defines in which direction the flex items are to be show. The flex-items can be stacked vertically or they can be arranged horizontally. The items cane be stacked vertically by setting flex-direction as column and they can be arranged horizontally by setting flex-direction as row. Let us write a code which will show flex-items both as row and column.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .flex-container{
            border:3px solid green;
            display:flex;
            flex-direction: row;
            width:30%;
        }
        .flexitem{
            margin:5px;
        }
        #flexitem1{
            border:2px solid red;
            background-color: pink;
            height:150px;
            width:150px;
        }
        #flexitem2{
            border:2px solid rgb(3, 73, 32);
            background-color: rgb(112, 240, 150);
            height:150px;
            width:150px;
        }
        #flexitem3{
            border:2px solid rgb(219, 205, 6);
            background-color: rgb(184, 182, 113);
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <h3>Flex box with flex-direction as row</h3>
    <div class="flex-container">
        <div class="flexitem" id="flexitem1">
            <p>Flex-item1</p>
        </div>
        <div class="flexitem" id="flexitem2">
            <p>Flex-item2</p>
        </div>
        <div class="flexitem" id="flexitem3">
            <p>Flex-item3</p>
        </div>
    </div>
</body>
</html>
flex-direction as row, www.programmingtutorial.in
Figure-1

Now, in the above code just change flex-direction to column, you will get the result as shown below:

flex-direction as column, www.programmingtutorial.in
Figure-2

If you change the flex-direction as row-reverse, the result will be opposite to figure-1. You can copy above code in notepad and save it by giving filename.html and run with browser, and check it for row-reverse property. Similarly, if you change the flex-direction as column-reverse, the result will be opposite to figure-2.

flex-wrap in CSS

The flex-container shows flex-items in a single row or single column only, which is its default setting. However, you can set flex-items in more than one row or column if required by using flex-wrap property. The flex-wrap property can accept three values.

no-wrap

This is the default value and it places flex-items in a single line.

wrap

In wrap value, the container breaks its flex-items into multiple lines when it is too difficult to fit items in single line.

wrap-reverse

The flex-items will wrap in reverse direction.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .flex-container{
            border:3px solid green;
            display:flex;
            flex-direction: row;
            flex-wrap:wrap;
        }
        .flexitem{
            margin:5px;
        }
        #flexitem1{
            border:2px solid red;
            background-color: pink;
            height:50px;
            width:1000px;
        }
        #flexitem2{
            border:2px solid rgb(3, 73, 32);
            background-color: rgb(112, 240, 150);
            height:50px;
            width:1000px;
        }
        #flexitem3{
            border:2px solid rgb(219, 205, 6);
            background-color: rgb(184, 182, 113);
            height:50px;
            width:1000px;
        }
    </style>
</head>
<body>
    <h3>Flex box example with flex wrap</h3>
    <div class="flex-container">
        <div class="flexitem" id="flexitem1">
            <p>Flex-item1</p>
        </div>
        <div class="flexitem" id="flexitem2">
            <p>Flex-item2</p>
        </div>
        <div class="flexitem" id="flexitem3">
            <p>Flex-item3</p>
        </div>
    </div>
</body>
</html>
flex-wrap in css, www.programmingtutorial.in

flex-flow in CSS

The flex-flow property of CSS is the shorthand property of flex-direction and flex-wrap. The syntax of the property is shown below:

flex-flow:flex-direction flex-wrap

Let us write a code for flex-flow property:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .flex-container{
            border:3px solid green;
            display:flex;
            flex-flow:column-reverse wrap-reverse;
        }
        .flexitem{
            margin:5px;
        }
        #flexitem1{
            border:2px solid rgb(14, 172, 22);
            background-color: rgb(87, 189, 87);
            height:50px;
            width:1000px;
        }
        #flexitem2{
            border:2px solid rgb(3, 73, 32);
            background-color: rgb(112, 240, 150);
            height:50px;
            width:1000px;
        }
        #flexitem3{
            border:2px solid rgb(47, 5, 87);
            background-color: rgb(147, 122, 168);
            height:50px;
            width:1000px;
        }
    </style>
</head>
<body>
    <h3>Flex flow example with column reverse and wrap reverse</h3>
    <div class="flex-container">
        <div class="flexitem" id="flexitem1">
            <p>Flex-item1</p>
        </div>
        <div class="flexitem" id="flexitem2">
            <p>Flex-item2</p>
        </div>
        <div class="flexitem" id="flexitem3">
            <p>Flex-item3</p>
        </div>
    </div>
</body>
</html>
flex-flow in css, www.programmingtutorial.in

Aligning flex items within flex container

When a flex container is created, then there is need to align flex items within the flex-container. The flex items can be aligned by using four properties as shown below:

  • justify-content
  • align-content
  • align-items
  • align-self

justify-content in flex box

This flex items can be aligned horizontally along main axis by using justify-content property. The justify-content property accepts the following values:

  • flex-start: It is the default value. In flex-start, the items are placed at the start of main axis.
  • flex-end: In flex-end, the items are placed at the end of main axis.
  • center: Flex items are placed at the center of the main axis with equal amounts of free space at both ends.
  • space-between: In this value, the flex items are placed evenly when first item is placed at main start edge and the last item at main end edge. If items overflow or there’s only one item, this value is equal to flex-start.
  • space-around: Flex items are distributed evenly with half-size spaces on either end. If they overflow or there’s only one item, this value is identical to center.

Let us now add a code for justify-content of flex-items: In our code we will use only one value of justify-content property but the result of all justify values will be shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .flex-container{
            border:3px solid green;
            display:flex;
            justify-content: space-around;
        }
        .flexitem{
            margin:5px;
        }
        #flexitem1{
            border:2px solid rgb(14, 172, 22);
            background-color: rgb(87, 189, 87);
            height:150px;
            width:150px;
        }
        #flexitem2{
            border:2px solid rgb(3, 73, 32);
            background-color: rgb(112, 240, 150);
            height:150px;
            width:150px;
        }
        #flexitem3{
            border:2px solid rgb(47, 5, 87);
            background-color: rgb(147, 122, 168);
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <h3>Flex flow example with column reverse and wrap reverse</h3>
    <div class="flex-container">
        <div class="flexitem" id="flexitem1">
            <p>Flex-item1</p>
        </div>
        <div class="flexitem" id="flexitem2">
            <p>Flex-item2</p>
        </div>
        <div class="flexitem" id="flexitem3">
            <p>Flex-item3</p>
        </div>
    </div>
</body>
</html>
justify-content space-around
space-around value
justify-content space-between
space between
justify-content center, www.programmingtutorial.in
center

align-content in flex box

Flex items can be aligned along the cross axis (i.e. in the perpendicular direction) of the flex container using the align-items or align-self property. However, where the align-items is applied to the flex container, the align-self property is applied to the individual flex items, and overrides align-items. Both properties accept the following values:

flex-start: Flex items are placed at the start of the cross axis.

flex-end: Flex items are placed at the end of the cross axis.

center: Flex items are placed at the center of the cross axis with equal amounts of free space at both ends. If the leftover free-space is negative i.e. if the items overflow, then the flex items will overflow equally in both directions.

baseline: The text baseline (or inline axis) of each flex item is aligned with the baseline of the flex item with the largest font-size.

stretch: The flex item stretches to fill the current row or column unless prevented by the minimum and maximum width or height. Default value for align-items property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .flex-container{
            border:3px solid green;
            display:flex;
            align-items: center;
            text-align: center;
            height:500px;
            width:50%;
        }
        .flexitem{
            margin:5px;
        }
        #flexitem1{
            border:2px solid rgb(14, 172, 22);
            background-color: rgb(87, 189, 87);
            height:150px;
            width:150px;
            display:flex;
            align-items: center;
        }
        #flexitem2{
            border:2px solid rgb(3, 73, 32);
            background-color: rgb(112, 240, 150);
            height:150px;
            width:150px;
            display:flex;
            align-items: center;
        }
        #flexitem3{
            border:2px solid rgb(47, 5, 87);
            background-color: rgb(147, 122, 168);
            height:150px;
            width:150px;
            display:flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <h3>Justify content property example</h3>
    <div class="flex-container">
        <div class="flexitem" id="flexitem1">
            <p>Flex-items with align-items center value</p>
        </div>
        <div class="flexitem" id="flexitem2">
            <p>Flex-items with align-items center value</p>
        </div>
        <div class="flexitem" id="flexitem3">
            <p>Flex-items with align-items center value</p>
        </div>
    </div>
</body>
</html>
align-items center, www.programmingtutorial.in

Child elements of flex-container

The direct child of flex-container automatically becomes flexible items. There are following properties of flex items:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

order and flex-grow in flex box

The order property specifies the order of flex items. This can be used when you want to shuffle the order as per your requirement. Flex grow specify the different size of flex items. The code for order and flex-grow property is given below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .container1{
            border:3px solid green;
            display:flex;
            width:50%;
        }
        .container2{
            border:3px solid rgb(60, 0, 128);
            display:flex;
            width:50%;
            margin-top:10px;
        }
        .flexitem{
            margin:5px;
        }
        #item1{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: burlywood;
            order:3;
        }
        #item2{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(218, 214, 12);
            order:1;
        }
        #item3{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(197, 159, 159);
            order:2;
        }
        #item4{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(187, 142, 189);
            flex-grow: 2;
        }
        #item5{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(116, 158, 119);
            flex-grow: 4;
        }
        #item6{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(179, 166, 150);
            flex-grow:6;
        }    
    </style>
</head>
<body>
    <h3>Flex order and flex grow property example</h3>
    <div class="container1">
        <div class="flexitem" id="item1">First box</div>
        <div class="flexitem" id="item2">Second box</div>
        <div class="flexitem" id="item3">Third box</div>
    </div>
    <div class="container2">
        <div class="flexitem" id="item4">Fourth box</div>
        <div class="flexitem" id="item5">Fifth box</div>
        <div class="flexitem" id="item6">Sixth box</div>
    </div>
</body>
</html>
flex order and flex grow
First showing order property and second row showing flex-grow

The shrink and basis properties of flex items

The flex-shrink specifies how much a flex item will shrink relative to other items. The value must be given as number. Its default value is 1. Ont the other hand, flex-basis specifies an initial length of a flex item.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box</title>
    <style>
        .container1{
            border:3px solid green;
            display:flex;
            width:50%;
            align-items: stretch;
        }
        .container2{
            border:3px solid rgb(60, 0, 128);
            display:flex;
            width:50%;
            margin-top:10px;
        }
        .flexitem{
            margin:5px;
        }
        #item1{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: burlywood;
            flex-shrink:0;
        }
        #item2{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(218, 214, 12);
            flex-shrink:4;
        }
        #item3{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(197, 159, 159);
            flex-shrink:2;
        }
        #item4{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(187, 142, 189);
            flex-basis: 100px;
        }
        #item5{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(116, 158, 119);
            flex-basis: 200px;
        }
        #item6{
            height:50px;
            width:50px;
            border:2px solid red;
            background-color: rgb(179, 166, 150);
            flex-basis: 300px;
        }
        
    </style>
</head>
<body>
    <h3>Flex order and flex grow property example</h3>
    <div class="container1">
        <div class="flexitem" id="item1">First box</div>
        <div class="flexitem" id="item2">Second box</div>
        <div class="flexitem" id="item3">Third box</div>
    </div>
    <div class="container2">
        <div class="flexitem" id="item4">Fourth box</div>
        <div class="flexitem" id="item5">Fifth box</div>
        <div class="flexitem" id="item6">Sixth box</div>
    </div>
</body>
</html>
flex-shrink

Flex property

The flex property is a shorthand of flex-grow, flex-shrink and flex-basis.