Detailed explanation of flex layout

This time I will bring you a detailed explanation of flex layout. What are the precautions of the detailed explanation of flex layout? The following is a practical case, let’s take a look.

Vertical centering is a common page layout method. For inline elements, you can set text-align:center;vertical-align:center to achieve,
Block-level elements can usually be achieved through the following settings

.parent{    position: relative;
}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);
}

However, for the simplicity and elegance of css, in addition to inline, inline-block, and block layout, the fourth layout method of css, flex, came into being
Only The following settings are required to easily center the element vertically

.parent{    display: flex;    justify-content: center;    align-items: center;
}

Note: When set to flex layout, the float, clear and vertical-align attributes of the child elements will be invalid

flexBasic concepts

Elements that adopt flex layout are called flex containers. All child elements within an element are called flex items.
The container has two axes by default: the horizontal main axis (main axis) and the vertical cross axis (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 item is called main size, and the cross axis space occupied by a single item is called cross size.

Properties of flex container

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

The flex-direction property determines the direction of the main axis.

row (default value): The main axis is horizontal and the starting point is on the left

row-reverse: The main axis is horizontal and the starting point is on the right

column: The main axis is vertical , the starting point is on the upper edge

column-reverse: the main axis is vertical, the starting point is on the lower edge

flex-wrap

By default, the items are arranged on the main axis, The flex-wrap attribute defines how to wrap a line if the main axis line cannot fit.

nowrap (default value):, do not wrap

wrap: wrap, the first line is at the top

wrap-reverse: wrap, the first line is at the bottom

flex-flow

The flex-flow property is the abbreviation of the flex-direction property and the flex-wrap property.
The default value is row nowrap.

justify-content

The justify-content property defines the alignment of the item (from the element) on the main axis.

flex-start (default): left-aligned

flex-end: right-aligned

center: centered

space-between: aligned at both ends , the intervals between items are all equal.

space-around: Each item is equally spaced on both sides. Therefore, the space between items is twice as large as the space between items and the border.

align-items

The align-items property defines how items are aligned on the cross axis.

stretch (default value): If the item does not set a height or is set to auto, it will occupy the entire height of the container.

flex-start: Align the starting point of the cross axis.

flex-end: The end point alignment of the cross axis.

center: Align the midpoint of the cross axis.

baseline: The baseline alignment of the first line of text of the item.

align-content

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

stretch (default value): The axis occupies the entire cross axis.

flex-start: Align with the starting point of the cross axis.

flex-end: Aligned with the end point of the cross axis.

center: Aligned with the midpoint of the cross axis.

space-between: Align with both ends of the cross axis, and the intervals between the axes are evenly distributed.

space-around: Each axis is equally spaced on both sides. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame.

flex item (self-element) attribute

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

order attribute defines the order in which items are arranged. The smaller the value, the higher the ranking. The default is 0.

flex-grow

The flex-grow attribute defines the enlargement ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.
If all items have a flex-grow property of 1, they will equally divide the remaining space.
If the flex-grow property of one item is 2 and the other items are 1, the former will occupy twice as much remaining space as the other items.

flex-shrink

The flex-shrink property defines the shrinkage ratio of the item. The default is 1, that is, if there is insufficient space, the item will shrink.
If the flex-shrink property of all items is 1, when there is insufficient space, they will all be reduced proportionally.
If the flex-shrink attribute of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.
Negative values ​​are not valid for this attribute.

flex-basis

The flex-basis property defines the main size of the item before allocating excess space.
Based on this attribute, the browser calculates whether there is extra space on the main axis. Its default value is auto, which is the original size of the project.
It can be set to the same value as the width or height attribute (such as 350px), then the item will occupy a fixed space.

flex

The flex property is the abbreviation of flex-grow, flex-shrink and flex-basis. The default value is: 0 1 auto. The last two properties are optional.
This attribute has two shortcut values: auto (1 1 auto) and none (0 0 auto).

align-self

The align-self attribute allows a single item to be aligned differently from other items and can override the align-items attribute.
Default value: auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.
This attribute may take 6 values. Except for auto, the others are exactly the same as the align-items attribute.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Observer Pattern of Javascript

Proxy Pattern of Javascript

Strategy Pattern of Javascript

The above is the detailed content of Detailed explanation of flex layout. For more information, please follow other related articles on the PHP Chinese website!