Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Flex Align Items in CSS - CN

    Uploaded by

    laptopbackup66
    Flex

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Flex Align Items in CSS - CN

    Uploaded by

    laptopbackup66
    4 views3 pages
    Flex

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Flex

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    4 views3 pages

    Flex Align Items in CSS - CN

    Uploaded by

    laptopbackup66
    Flex

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 3

    Flex Align Items in CSS

    Overview
    The align-items property is used to align the flex items along the cross-axis. The
    cross-axis is perpendicular to the main axis.

    If the main axis is horizontal, then the cross-axis is vertical. If the main axis is vertical,
    then the cross axis is horizontal.

    Align-items can be set to any of these values:

    ● flex-start
    ● flex-end
    ● center
    ● stretch (Default)
    ● baseline

    stretch
    The stretch value stretches the flex items to fill the container along the cross axis.
    This is the default value. Else use align-items: stretch ; in the flex-container class.

    CSS : .flex-container {
    display:flex;
    align-items: stretch ;
    }
    .flex-container div {
    width:50px;
    min-height : 50 px ;
    }

    Browser :

    1
    flex-start
    The flex-start value aligns the items towards the start of the cross axis.

    CSS : .flex-container {
    display:flex;
    align-items: flex-start;
    }

    Browser :

    flex-end
    The flex-end value aligns the items towards the end of the cross axis.

    CSS : .flex-container {
    display:flex;
    align-items: flex-end;
    }

    Browser :

    center
    The center value aligns the items towards the center of the cross axis

    CSS : .flex-container {
    display:flex;
    align-items: center;
    }

    2
    Browser :

    baseline
    The baseline value aligns the flex items such as the baselines of the content inside
    the items. This means that the bottom base of the content inside the flex item will
    be the axis to align the items.
    To work with this property, we need to make some variations in the above code. The
    changes are highlighted.

    HTML : <div class="flex-container">


    <div > <h3> div1 </h3> </div>
    <div > <h2> div2 </h2> </div>
    <div > <h1> div3 </h1> </div>
    </div>

    CSS : .flex-container {
    display:flex;
    align-items: baseline;
    }

    Browser :

    You might also like