Scribd Logo
Upload

Welcome to Scribd!

  • 21 views

    Flex Box

    Uploaded by

    foces
    The document defines 8 properties for controlling flexbox layouts: justify-content and align-items control item alignment on the main and cross axes respectively, flex-direction sets the main axis direction, order controls item order, align-self overrides align-items for individual items, flex-wrap controls wrapping, flex-flow is a shorthand for flex-direction and flex-wrap, and align-content controls spacing between wrapped lines.

    Copyright:

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

    Flex Box

    Uploaded by

    foces
    21 views3 pages
    The document defines 8 properties for controlling flexbox layouts: justify-content and align-items control item alignment on the main and cross axes respectively, flex-direction sets the main axis direction, order controls item order, align-self overrides align-items for individual items, flex-wrap controls wrapping, flex-flow is a shorthand for flex-direction and flex-wrap, and align-content controls spacing between wrapped lines.

    Original Description:

    Flex Box

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document defines 8 properties for controlling flexbox layouts: justify-content and align-items control item alignment on the main and cross axes respectively, flex-direction sets the main axis direction, order controls item order, align-self overrides align-items for individual items, flex-wrap controls wrapping, flex-flow is a shorthand for flex-direction and flex-wrap, and align-content controls spacing between wrapped lines.

    Copyright:

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

    Flex Box

    Uploaded by

    foces
    The document defines 8 properties for controlling flexbox layouts: justify-content and align-items control item alignment on the main and cross axes respectively, flex-direction sets the main axis direction, order controls item order, align-self overrides align-items for individual items, flex-wrap controls wrapping, flex-flow is a shorthand for flex-direction and flex-wrap, and align-content controls spacing between wrapped lines.

    Copyright:

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

    FlexBox

    1. justify-content - which aligns items (main-axis) horizontally

    It accepts the following values:

    flex-start: Items align to the left side of the container.

    flex-end: Items align to the right side of the container.

    center: Items align at the center of the container.

    space-between: Items display with equal spacing between them.

    space-around: Items display with equal spacing around them.

    2. align-items - this CSS property aligns items (cross-axis) vertically and

    It accepts the following values:

    flex-start: Items align to the top of the container.

    flex-end: Items align to the bottom of the container.

    center: Items align at the vertical center of the container.

    baseline: Items display at the baseline of the container.

    stretch: Items are stretched to fit the container.

    3. flex-direction - This CSS property defines the direction items are placed in
    the container (OR DEFINES DIRECTION OF MAIN AXIS).

    It accepts the following values:

    row: Items are placed the same as the text direction.

    row-reverse: Items are placed opposite to the text direction.

    column: Items are placed top to bottom.

    column-reverse: Items are placed bottom to top.


    NOTE: Notice that when the flex direction is a column, justify-content changes to
    the vertical and align-items to the horizontal.

    4. order property - we can apply the order property to individual items. By


    default, items have a value of 0, but we can use this property to also set it to a
    positive or negative integer value (-2, -1, 0, 1, 2).

    ex: .yellow {

    order:1;}

    5. align-self - can apply to individual items is align-self. This property accepts


    the same values as align-items and its value for the specific item.

    eg: .yellow {

    align-self:flex-end;}

    6. flex-wrap property - Specifies whether flex items are forced on single line
    or can be wrapped on multiple line.

    It accepts the following values:

    nowrap: Every item is fit to a single line. (default)

    wrap: Items wrap around to additional lines.

    wrap-reverse: Items wrap around to additional lines in reverse.

    7. flex-flow - The two properties flex-direction and flex-wrap are used so often
    together that the shorthand property flex-flow was created to combine them. This
    shorthand property accepts the value of one of the two properties separated by a
    space.

    For example, you can use flex-flow: row wrap to set rows and wrap them.
    8. align-content - align-content (on cross axis) to set how multiple lines are
    spaced apart from each other.

    It accepts the following values:

    flex-start: Lines are packed at the top of the container.

    flex-end: Lines are packed at the bottom of the container.

    center: Lines are packed at the vertical center of the container.

    space-between: Lines display with equal spacing between them.

    space-around: Lines display with equal spacing around them.

    stretch: Lines are stretched to fit the container.

    This can be confusing, but align-content determines the spacing between lines,
    while align-items determines how the items as a whole are aligned within the
    container. When there is only one line, align-content has no effect.

    You might also like