There are plenty of flexible layout tutorials on the web, so I won’t go into detail here

This article will sort out the commonly used attributes as a quick guide for future use

1. Basic concepts

  • Set up thedisplay: flex;Is calledFlex container, where all the child elements are calledThe Flex project
  • The container has two axes for positioning, a horizontal axis and a vertical cross axis, along which items are arranged by default

2. Container Properties (set on container)

  • Flex-direction: sets the spindle direction. The possible values are as follows

    • Row (default) : The main axis runs horizontally, starting at the left
    • Row-reverse: The main axis is horizontal and the starting point is to the right
    • Column: The main axis is in the vertical direction, starting at the top
    • Column-reverse: The main axis is in the vertical direction and the starting point is at the bottom

  • Flex-wrap: defines a line wrap. The options are as follows

    • Nowrap (default) : no line breaks
    • -Leonard: Wrap. The first line is on top
    • Wrap-reverse: Newline, first line below

  • Illustration-content: Defines the alignment of items on the main axis, with the following options

    • Flex-start (default) : Start alignment
    • Flex-end: end alignment
    • Center: center
    • Space-between: the two ends are aligned with equal intervals between items
    • Space-around: the two ends are aligned and the two sides of the project are equally spaced

  • Align-items: defines the alignment of items on the cross axis. The possible values are as follows

    • Flex-start: start alignment
    • Flex-end: end alignment
    • Center: center
    • Baseline: The baseline alignment of the first line of text of the project
    • Stretch (default) : If height is not set or auto is set for the project, the project fills up the height of the container

3. Project properties (set on the project)

  • Order: defines the order of items. The property accepts an integer. The smaller the value, the higher the order

  • Flex-grow: Defines the zoom ratio of the project. Default is 0, which means no zoom even if there is free space

    If all items are set to 1 and have space left, they will split the space equally

    If one project is set to 2 and the others to 1, that project takes up twice as much free space as the others

  • Flex-shrink: Defines the scale by which a project shrinks. The default is 1, indicating that it shrinks if there is insufficient space

    If all items are set to 1 and there is not enough space, they will shrink equally

    If one item is set to 0 and the others to 1, that item will not shrink and the others will shrink normally

  • Flex-basis: The main axis space occupied by the project before the extra space is allocated. The default is auto, indicating the original size of the project

  • Align-self: Defines the alignment of the item, overriding the align-items setting, which defaults to auto and inherits the parent element setting