What is Display Flex in CSS?

In CSS, display: flex; is a value of the display property that enables the flexible layout model for arranging the elements in a container. When you can apply the display: flex; to the container element, it can become the flex container and its direct children become the flex items. This layout model allows you to distribute the space within the container efficiently and align the flex items in various ways.

These are the following topics that we are going to discuss:

What is Display Flex in CSS?

The display: flex property in CSS is the layout model that allows you to arrange the items inside the container flexibly and responsively. When applied to the container, it can enable the children (flex items) to be distributed along the specific axis, either horizontally or vertically, while adjusting their sizes dynamically to fit within the container space.

Flexbox can simplify creating the layouts that adapt to the different screen sizes and conditions, making it very useful for the responsive design.

What is the Display Flex Property?

The display: flex property can define the flex container and enable its direct children (flex items) to use the flex layout. This layout system can be designed for the efficient alignment and distribution of the items inside the container, even when their sizes are unknown or dynamic.

Key Features of the "display: flex"

• One-Dimensional Layout: Flexbox is the one-dimensional layout method, meaning it lays out the items in a single low (horizontal), or a single column (vertical). This is different from grid layouts, which are two-dimensional.
• Flex Container and Flex Items: Once display: flex; can be applied to the container, it becomes the flex container, and its immediate children become the flex items.
• Main Axis and Cross Axis: Flexbox can operates the along two axes:
  • Main Axis: The primary axis along with the flex items are laid out. It can be horizontal or vertical, depending on the flex-direction.
  • Cross Axis: It can be perpendicular to the main axis. If main axis is the row then the cross axis is vertical and if the main axis is a column, the cross axis is horizontal.
• Flexible Item Sizing: Flex items can grow to the fill unused space or shrink to prevent the overflow, based on the properties flex-grow, flex-shrink and flex-basis.
• Alignment and Justification: We can easily align and distribute the space among flex items using properties like justify-content, align-items and align-content.

Properties and Values for the Flex Property

The following properties can be used with the Flexbox model to the control the layout:

• display: flex; : This turns the container into the flexbox.
• flex: direction : It can defines the direction of the flex items inside the container.The below are possible values:
  • row: It can aligns the items horizontally (default).
  • row-reverse: It can aligns the items horizontally reverse.
  • column: It can aligns the items vertically.
  • column-reverse: It can aligns the items vertically in reverse.
• justify-content; : This can aligns along the main axis. Here the below possible values:
  • flex-start: It can aligns the items at the begining of the container.
  • flex-end: It can aligns the items in the center.
  • center: It can aligns items in the center.
  • space-between: It can places equal space between the items.
  • space-around: It can places equal space around the items.
• align-items: It can aligns along the cross-axis. Here the below possible values:
  • stretch: Items can be stretched to fill the container.
  • flex-start: It can aligns the items at the start of the cross-axis.
  • flex-end: It can aligns the items at the end.
  • center: It can aligns the items at the center.
• flex: wrap: This can specifies whether the flex items should wrap when they overflow container. Here the possible values:
  • nowrap: Items are laid out in one line.
  • wrap: Item wrap onto mulitple lines.
  • wrap-reverse: Items wrap onto mulitple line in the reverse order.
• flex-grow: Defines the ability of the flex item to grow relative to the rest of the flex items. Example: flex-grow: 1 allows the item to the take up available space.
• flex-shrink: Defines the ability of the flex item to the shrink if needed. Example: flex-shrink: 1 allows the items to shrink to fit within the container.
• flex-basis: This can set the initial size of the flex item before it adjusts based on the flex-grow or flex-shrink. Example: flex-basis: 100px.

Syntax:

To use the Flexbox, we need to define the container element and apply the display: flex; property to it. It can makes the container the flex container, and all of its the direction children become flex items.

.container {
    display: flex;
}

Example : The .flex-container can be styled with display: flex to create a flex container, using flex-direction: row to arrange items horizontally, justify-content: space-between to distribute items evenly with space between them, and align-items: center to vertically center the items within the container.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            /* Default direction */
            justify-content: space-between;
            /* Space between items */
            align-items: center;
            /* Align items vertically centered */
            background-color: lightgray;
            padding: 10px;
        }

        .flex-item {
            background-color: teal;
            padding: 20px;
            margin: 5px;
            color: white;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>

</html>

Output:

Conclusion

display: flex is the powerful layout tool in CSS that provides the flexible way to design the responsive layouts. By using the flex properties, we can create the complex layouts that adjust the dynamically based on the size of the content and the available space, making it can ideal for the modern web design.