Flexbox tutorial in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="CSS/Flexbox_Tutorial.css">
    <title>Flexbox Tutorial</title>
</head>

<body>
    Flexbox is a one-dimensional layout method for laying out items in rows or columns.
    CSS flexbox is a better way to align items into a container.
    Flexbox = flexible + box
    When elements are laid out as flexible boxes, they are laid out along two axes
    <h1>This is Flexbox Tutorial</h1>
    <div class="container">
        <div class="item" id="item-1">First Box</div>
        <div class="item" id="item-2">Second Box</div>
        <div class="item" id="item-3">Third Box</div>
        <div class="item" id="item-4">Fourth Box</div>
        <div class="item" id="item-5">Fifth Box</div>
        <div class="item" id="item-6">Sixth Box</div>
    </div>
</body>

</html>




Below File is CSS/Flexbox_Tutorial.css File.
.container {
    height: 544px;
    width: 100%;
    border: 2px solid #000000;
    /* Initialize the container as a flex box */
    display: flex;
    /* Flex properties for a flex container */

    /* (Default value of flex-direction is row) */
    flex-direction: row;
    /* flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse; */

    /* (Default value of flex-direction is no-wrap) */
    /* flex-wrap: wrap; */
    /*flex-wrap: wrap-reverse; */

    /* This is a shorthand for flex-direction: and flex-wrap: */
    /* flex-flow: row-reverse wrap; */

    /* justify-content will justify the content in horizontal direction */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-evenly; */
    /* justify-content: space-around; */

    /* justify-content will justify the content in vertical direction */
    /* align-items: center; */
    /* align-items: flex-end; */
    /* align-items: flex-start; */
    /* align-items: stretch; */
}

.item {
    width: 100px;
    height: 100px;
    background-color: #ff6347;
    border: 2px solid #008000;
    margin: 10px;
    padding: 3px;
}

#item-1 {
    /* Flex properties for a flex item */
    /* Higher the order, later it shows up in the container */
    /* order: 2; */
    flex-grow: 3;
    flex-shrink: 2;
}

#item-2 {
    /* flex-grow: 3;
    flex-shrink: 5; */

    /* when flex-direction is set to row flex-basis: will control width
    when flex-direction is set to column flex-basis: will control height */
    flex-basis: 160px;
}

#item-3 {
    /* order: 40; */
    /* flex: flex-grow flex-shrink flex-basis */
    /* flex: 2 2 230px; */
    /* align-self: flex-end; */
    /* align-self: flex-start; */
    align-self: center;
}




















Comments

Post a Comment