Properties for the Children (flex items)

The following are the list of properties that can be applied to the flex items.

Property	Descriptions	Syntax
order	Specifies the order in which the flex items appear within the container. Its default value is 0 and if value is -1 then it makes the last element to item element.	order: <integer>;
flex-grow	Determines the ability of a flex item to grow relative to others. It determines the ability of a flex item to grow relative to others.	flex-grow: <number>;
flex-shrink	Defines the ability of a flex item to shrink relative to others. The flex-shrink property won’t work if the flex container has the flex-wrap: wrap; property. The default value is 1. The value 0 allows keeping the item’s original size. Negative numbers are invalid. The flex property is the shorthand for flex-grow, flex-shrink, and flex-basis combined. Note: .item1 { flex: 1 1 20em; } // flex-grow, flex-shrink, and flex-basis	flex-shrink: <number>;
flex-basis	Establishes the initial size of a flex item. The “content” keyword flex-basis signifies sizing based on the item’s content, while the “auto” keyword indicates that the size should be determined by the width or height property of the element, previously handled by the now-deprecated “main-size” keyword.	flex-basis: <length>
flex	Shorthand property combining flex-grow, flex-shrink, and flex-basis.	flex: none
align-self	Overrides the align-items value for a specific flex item.	align-self: auto

The below images depicts the flex items Properties.

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:

Properties for the Children (flex items)

Complete Guide to CSS Flexbox

Similar Reads

Contact Us