Day 1 of posting a blog

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>