How to use flex layout

Time:2021-5-30

FLex

Flex layout learning

What is flex layout

Flex is the abbreviation of flexible box, which means “flexible layout”, and is used to provide the maximum flexibility for the box model.

  • Any container can be specified as a flex layout.
    .box {
    display: flex;
    }
  • Inline elements can also use flex layout.
    .box {
    display: inline-flex;
    }
  • The browser of WebKit kernel must be prefixed with – WebKit.
    .box {
    display: -webkit-flex; / Safari /
    display: flex;
    }
  • Note: after flex layout is set, the float, clear and vertical align attributes of child elements will be invalid.

Basic concepts

  • The elements with flex layout are called flex containers, or “containers” for short. All its child elements automatically become members of the container, which is called flex item, or “project” for short.
  • By default, the container has two axes: a horizontal main axis and a vertical cross axis. The starting position of the main axis (the intersection with the border) is called main start, and the ending position is called main end; The starting position of the cross axis is called cross start, and the ending position is called cross end.
  • Items are arranged along the main axis by default. The main axis space occupied by a single project is called main size, and the cross axis space occupied by a single project is called cross size.

Properties of the container

  1. Set the properties on the container

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

  • Flex direction property

    1. Attribute meaning: attributes determine the direction of the main axis (that is, the arrangement direction of items).
    2. Attribute usage:
    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    Row (default): the main axis is horizontal and the starting point is at the left end.
    Row reverse: the main axis is horizontal and the starting point is at the right end.
    Column: the main axis is vertical and the starting point is on the top edge.
    Column reverse: the main axis is vertical and the starting point is at the bottom edge.
  • Flex wrap property

    1. Attribute meaning: by default, items are arranged on a line (also known as “axis”). The flex wrap attribute defines how to wrap lines if an axis cannot line up.
    2. Attribute usage:
    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    Nowrap (default): does not wrap.
    Wrap: wrap, the first line is above.
    Wrap reverse: wrap the first line below.
  • Justify content property

    1. Attribute meaning: the justify content attribute defines the alignment of items on the spindle.
    2. Attribute usage:
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Flex start (default): align left
Flex end: right aligned
Center: Center
Space between: both ends are aligned so that the space between items is equal.
Space around: the space on both sides of each project is equal. Therefore, the spacing between items is twice as large as the spacing between items and borders.
  • Align items property

    1. Attribute meaning: the align items attribute defines how items are aligned on the cross axis.
    2. Attribute usage:
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Flex start: align the start point of the cross axis.
Flex end: the end of the cross axis is aligned.
Center: the center of the cross axis is aligned.
Baseline: the baseline alignment of the first line of text in an item.
Stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.
  • Align content property

    1. Attribute meaning: the align content attribute defines the alignment of multiple axes. This property does not work if the project has only one axis.
    2. Attribute usage:
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Flex start: align with the start point of the cross axis.
Flex end: align with the end of the cross axis.
Center: align with the midpoint of the cross axis.
Space between: it is aligned with both ends of the cross axis, and the spacing between the axes is evenly distributed.
Space around: the spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the border.
Stretch (default): the axis occupies the whole cross axis.
  • Flex flow property
    Attribute meaning: the flex flow attribute is the abbreviation of the flex direction attribute and the flex wrap attribute. The default value is row nowrap.
    Attribute usage:

    .box {
      flex-flow: [flex-direction] || [flex-wrap];
    }

Properties on Project

  1. Set the properties on the project

order、flex-grow、flex-shrink、flex-basis、flex、align-self

  • Order property

    1. Attribute meaning: the order attribute defines the order of items. The smaller the value, the higher the permutation. The default value is 0.
    2. Attribute usage:
    .item {
      order: [integer];
    }
    Sort according to the value of the integer, the bigger the lower
  • Flex growth property

    1. Attribute meaning: the flex growth attribute defines the magnification of the project, which is 0 by default, that is, if there is any remaining space, it will not be enlarged.
    2. Attribute usage:
    .item {
      flex-grow: [number]; /* default 0 */
    }
    If all items have a flex growth property of 1, they divide the remaining space equally, if any. If the flex growth attribute of an item is 2 and all other items are 1, the former will occupy twice as much space as the other items.
  • Flex shrink property

    1. Attribute meaning: the flex shrink attribute defines the reduction ratio of an item, which is 1 by default, that is, if there is not enough space, the item will be reduced.
    2. Attribute usage:
    .item {
      flex-shrink: [number]; /* default 1 */
    }
    If the flex shrink attribute of all items is 1, when the space is insufficient, they will be reduced in equal proportion. If the flex shrink attribute of one project is 0 and all other projects are 1, the former will not shrink when the space is insufficient.
    A negative value is not valid for this property.
  • Flex basis property

    1. Attribute meaning: the flex basis attribute defines the main size occupied by the project before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.
    2. Attribute usage:
    .item {
      flex-basis: [length]| auto; /* default auto */
    }
    It can be set to the same value as the width or height attribute (such as 350px), and the project will occupy a fixed space.
  • Flex properties

    1. Attribute meaning: Flex attribute is the abbreviation of flex grow, flex shrink and flex basis. The default value is 0.1 auto. The last two properties are optional.
    2. Attribute usage:
    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    The attribute has two shortcut values: Auto (1 1 auto) and none (0 0 auto).
    It is recommended that this attribute be used first, rather than writing three separate attributes separately, because the browser will calculate the correlation value.
  • Align self property

    1. Attribute meaning: the align self attribute allows a single item to have a different alignment from other items, and can override the align items attribute.
    2. Attribute usage:
    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    Auto (default): it inherits the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.
    Flex start: align with the start point of the cross axis.
    Flex end: align with the end of the cross axis.
    Center: align with the midpoint of the cross axis.
    Space between: it is aligned with both ends of the cross axis, and the spacing between the axes is evenly distributed.
    Space around: the spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the border.
    Stretch: the axis occupies the whole cross axis.