Ranga's Blog
Flexbox and its properties

Photo by Lauren Mancke on Unsplash

Flexbox and its properties

komaravalli Ranga Bbu's photo
komaravalli Ranga Bbu
·

3 min read

Table of contents

Flexbox is a layout system used in CSS that provides a flexible way to design and align elements in a web page. It allows us to create dynamic and responsive layouts that adjust to different screen sizes and devices. In this article, we will discuss the basics of Flexbox and how to use it in your web projects.

Flexbox Terminology

Before we dive into the syntax and usage of Flexbox, it's important to understand the terminology that's used in the Flexbox model. Here are the main terms you need to know:

  1. Flex container - The parent element that contains the flex items. This is where we apply the display: flex property to activate the Flexbox layout.

  2. Flex item - The child elements inside the Flex container. These are the elements that will be aligned and positioned using the Flexbox properties.

  3. Main axis - The primary axis that runs along the length of the Flex container. This can be either horizontal or vertical, depending on the flex-direction property.

  4. Cross axis - The secondary axis that runs perpendicular to the main axis. This is the axis that is used for alignment and positioning of elements.

Flexbox Properties

Here are some of the main Flexbox properties you can use to control the layout and alignment of elements:

  1. display: flex - This property is used to activate the Flexbox layout on a container element.

  2. flex-direction - This property is used to specify the main axis of the Flex container. It can be set to row (horizontal), column (vertical), row-reverse (horizontal reverse), or column-reverse (vertical reverse).

  3. justify-content - This property is used to align the flex items along the main axis. It can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.

  4. align-items - This property is used to align the flex items along the cross axis. It can be set to flex-start, flex-end, center, stretch, or baseline.

  5. flex-wrap - This property is used to control the wrapping behavior of the flex items. It can be set to nowrap (no wrapping), wrap (wrap if necessary), or wrap-reverse (reverse wrap if necessary).

align-content - This property is used to align the flex lines (a group of flex items) along the cross axis. It can be set to flex-start, flex-end, center, space-between, space-around, or stretch.

flexbox example:

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: #f2f2f2;
        }

        .item {
            flex-basis: 30%;
            height: 200px;
            background-color: #fff;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        @media screen and (max-width: 768px) {
            .item {
                flex-basis: 45%;
            }
        }

        @media screen and (max-width: 480px) {
            .item {
                flex-basis: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

In this example, we first create a container element with the display: flex property. We also set the flex-wrap property to wrap so that the items will wrap to the next row if there isn't enough space in the container.

We then set the justify-content property to space-between and the align-items property to center. This will align the items along the main and cross axes, respectively.

Next, we define the style for the item elements. We set the flex-basis property to 30%, which means each item will take up 30% of the available space in the container. We also set the height, background-color, margin-bottom, and box-shadow properties to style the items.

Finally, we use media queries to adjust the flex-basis property for different screen sizes. For screens with a maximum width of 768px, we set the flex-basis property to 45%, and for screens with a maximum width of 480px, we set the flex-basis property to 100%. This will ensure that the items adjust to different screen sizes and maintain their layout and alignment.

CSSHTML5