Flexbox Properties

Properties for the Parent or Children

Flexbox properties provide a powerful toolkit for effortlessly crafting layouts that adapt seamlessly to different screen sizes. By using attributes like display, flex-direction, and justify-content, you gain precise control over how elements are arranged within their containers.

This means you can dictate whether items flow in rows or columns, how space is distributed, and more. The result is a naturally flowing design that feels intuitive to the user, without any hint of the sophisticated layout techniques used behind the scenes.

Complete Guide to CSS Flexbox

Flexbox, short for Flexible Box Layout, is a powerful CSS layout model that simplifies the creation of responsive and adaptable web designs. It excels at arranging elements within a container, optimizing space distribution, and handling dynamic content. This article will cover the basic idea of CSS Flexbox, along with various properties available for the Flexbox & understand them with the help of suitable examples.

Syntax:

.container { 
   display: flex;  
   flex-direction: row;  /* or column, etc. */
}

Example: In this example, all the flex properties will be used just by changing the “container class” and “item class”.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Styled Items</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            background-color: #f8acff;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            display: flex;
            background-color: darkgray;
            box-sizing: border-box;
            width: 30%;
            height: 30vh;
        }

        .item {
            width: 90px;
            height: 80px;
            display: flex;
            margin: 0;
            align-items: center;
            justify-content: center;
            border: 2px solid #333;
            box-sizing: border-box;
        }

        .item:nth-child(1) {
            background-color: #3498db;
        }

        .item:nth-child(2) {
            background-color: #2ecc71;
        }

        .item:nth-child(3) {
            background-color: #e74c3c;
        }

        .item:nth-child(4) {
            background-color: #f39c12;
        }

        .item:nth-child(5) {
            background-color: magenta;
        }
    </style>
</head>

<body>
    <h3>flex-basis</h3>
    <div class="container">
        <p class="item item1">Item1</p>
        <p class="item item2">Item2</p>
        <p class="item item3">Item3</p>
        <p class="item item4">Item4</p>
    </div>
</body>

</html>

Output:

Flexbox Properties

Complete Guide to CSS Flexbox

Similar Reads

Contact Us