Day 1 of posting a blog

antony stark — Thu, 09 Jul 2026 04:19:56 +0000

Today session i learnt about how to use flex box ,flex items and their properities

Flex Box is a css tool mainly used to arranging inside the elements or items in a horizantal or vertical within the container

In the Flex Box the x axis or main axis is the primary direction and it is determined by the flex direction property
If the direction is row,the main axis is horizantal and the cross axis is vertical

Flex Items/ child properities

it is the child element of the flex container or flex box
order- Specifies the display order of the flex items inside the flex container
flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items
flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items
flex-basis - Specifies the initial length of a flex item
align-self - Specifies the alignment for the flex item inside the flex container

Parent Properities

display - Must be set to flex or inline-flex
flex-direction - Sets the display-direction of flex items
flex-wrap - Specifies whether the flex items should wrap or not
flex-flow - Shorthand property for flex-direction and flex-wrap
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)
align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap

code area

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            border: 1px solid;
            padding: 10px;
            /* justify-content: center; */
            /* height: 100vh; */
            /* align-items: center; */
            width: 20%;
             /* flex-wrap: wrap; */
             align-self: center;

        }
        .items{
            border: 2px solid red;
            padding: 10px;
            /* height: 50%; */
        }
        #div1{
order: 2;
flex-grow: 1;
        }
        #div2{
order: 1;
flex-grow: 2;
        }
        #div3
        {
            flex-grow: 3;

            order: 3;
        }
    </style>
</head>
<body>
    <h1>Flex box</h1>
    <div class="container">
        <div id="div1">d1</div>
        <div id="div2">d2</div>
        <div id="div3">d3</div>
    </div>


</body>
</html>

DEV Community: antony stark

Day 1 of posting a blog