Scribd Logo
Upload

Welcome to Scribd!

  • Flex-Box Aide-Memoire

    Uploaded by

    Lyes Abdelli
    14 views2 pages
    This document describes CSS flexbox properties for flex containers and flex items. It lists the flex-direction, flex-wrap, justify-content, align-items, and align-content properties that control the layout of flex containers, and the order, flex-grow, flex-shrink, flex-basis, and align-self properties that control the layout of individual flex items.

    Original Description:

    Original Title

    flex-box aide-memoire

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes CSS flexbox properties for flex containers and flex items. It lists the flex-direction, flex-wrap, justify-content, align-items, and align-content properties that control the layout of flex containers, and the order, flex-grow, flex-shrink, flex-basis, and align-self properties that control the layout of individual flex items.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    14 views2 pages

    Flex-Box Aide-Memoire

    Uploaded by

    Lyes Abdelli
    This document describes CSS flexbox properties for flex containers and flex items. It lists the flex-direction, flex-wrap, justify-content, align-items, and align-content properties that control the layout of flex containers, and the order, flex-grow, flex-shrink, flex-basis, and align-self properties that control the layout of individual flex items.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 2

    display: flex

    FLEX CONTAINER
    ( élément parent )
    display: inline-flex

    flex-direction flex-wrap justify-content align-items align-content

    row
    Axe Principal (Main) Axe Secondaire (Cross)
    row-reverse nowrap
    wrap
    column flex-start flex-start flex-start
    wrap-reverse
    column-reverse flex-end flex-end flex-end
    center center center
    flex-flow baseline space-between
    space-between stretch space-around
    space-around stretch
    flex-direction + flex-wrap
    FLEX ITEMS
    ITEM 1 ITEM 2 ITEM 3
    ( élément enfant )

    order 0

    flex-grow 0

    flex-shrink 1 flex: 0 1) auto

    flex-basis auto

    align-self auto ( flex-start - flex-end - center - baseline - stretch )

    You might also like