Elastic boxes are a one-dimensional layout method for laying out elements by row or column. Elements can expand to fill additional Spaces and shrink to fit smaller Spaces.

1. Elastic containers and elastic elements

Elastic containers and elastic elements are parent and child, and they have different properties. To use an elastic box layout, you must first set an element to be an elastic container. You can turn elements into elastic containers by changing display: display:flex. The immediate children of an elastic container (those that do not contain grandchildren and their descendants) are called elastic elements.

<style>
    .parent{
      display: block;
    }
</style>
<div class="parent">
    <div class="child">
      <div class="grandson"></div>
    </div>
</div>
Copy the code

In the example above, the parent element is an elastic container, the child element is an elastic element, and the Grandson element is not an elastic element

2. Spindle and cross shaft

The main axis is the axis that extends along the direction in which the Flex element is placed, which is horizontal by default. A cross axis is an axis perpendicular to the placement direction of the Flex element.

3. Properties of an elastic container

3.1 the flex – direction

Flex-direction specifies the direction of the spindle and the arrangement of elastic elements. Optional values: Row defaults to horizontal, left-to-right row-reverse, right-to-left column, vertical, top-down column-reserve, vertical, bottom-up

3.2 the flex – wrap

Flex-wrap Sets whether an elastic element is wrapped in an elastic container. Optional: NowRAP Default value, no line wrap along the cross axis when the wrap space is insufficient

3.3 the justify – content

Illustration-content specifies how to allocate white space on the main axis optional values: The flex-start element will line up along the beginning of the spindle. The Flex-end element will line up along the end of the spindle. The center element will center the space-around blank sheets on both sides of the element White space on one side of an element (poor compatibility)

3.4 the align – content

Align-content: Allocation of auxiliary axis blank space Optional value: The flex-start element will line up along the beginning of the spindle. The Flex-end element will line up along the end of the spindle. The center element will center the space-around blank sheets on both sides of the element White space on one side of an element (poor compatibility)

4. Attributes of elastic elements

4.1 the flex – turns up

Flex-grow specifies the coefficient of the element’s stretch, which is an integer. When the parent element has free space, the children are allocated in coefficient proportions

When the coefficient is 0, flex-grow:1, the element does not elongate.

4.2 the flex – the shrink

Flex-shrink specifies the shrinkage factor of an elastic element. When there is not enough space in the parent element to accommodate all of the children, the children shrink in proportion to the coefficient