CSS Flexbox

The flexbox or flexible box model in CSS is a one-dimensional layout model that has flexible and efficient layouts with distributed spaces among items to control their alignment structure ie., it is a layout model that provides an easy and clean way to arrange items within a container. Flexbox can be useful for creating small-scales layouts & is responsive and mobile-friendly.

Features of flexbox:

  • A lot of flexibility is given.

  • Arrangement & alignment of items.

  • Proper spacing

  • Order & Sequencing of items.

  • Bootstrap 4 is built on top of the flex layout.

Before the flexbox model, we had 4 layout modes:

  • Block: It is used to make sections in web pages.

  • Inline: It is used for text.

  • Table: It is used for two-dimensional table data.

  • Positioned: It is used for the explicit position of an element.

There are 2 main components of the Flexbox:

  • Flex Container: The parent “div” which contains various divisions is called a flex container.

  • Flex Items: The items inside the container “div” are flex items.

For creating the flexbox, we need to create a flex container along with setting the display property to flex.

<!DOCTYPE html>
<html>

<head>
    <title>Flexbox Tutorial</title>
    <style>
    .flex-container {
        display: flex;
        background-color: #32a852;
    }

    .flex-container div {
        background-color: #c9d1cb;
        margin: 10px;
        padding: 10px;
    }
    </style>
</head>

<body>
    <h2>Navdeep's Blogs</h2>
    <h4> Flexbox</h4>
    <div class="flex-container">
        <div>Item1</div>
        <div>Item2</div>
        <div>Item3</div>
    </div>
</body>

</html>

Output:

Flexbox Axes: While working with Flexbox, we deal with 2 axes:

  • Main Axis

  • Cross Axis

Main Axis:

  • By default, the main axis runs from left to right.

  • Main Start: The start of the main axis is called Main Start.

  • Main Size: The length between Main Start and Main End is called Main Size.

  • Main End: The endpoint is called Main End.

  • Main And Cross Axis

left to right:

flex-direction: row;

right to left:

flex-direction: row-reverse;

top to bottom:

flex-direction: column;

bottom to top:

flex-direction: column-reverse;

Cross Axis: The cross axis will be perpendicular to the main axis.

  • By default, Cross Axis runs perpendicular to the Main Axis i.e. from top to bottom.

  • Cross Start: The start of the Cross axis is called Cross Start.

  • Cross Size: The length between Cross Start and Cross End is called Cross Size.

  • Cross End: The endpoint is called Cross End.

Thank you for your time. Happy Learning