What are the properties of css flex layout (elastic layout)? Introduction to css flex layout properties

What this article brings to you is what are the properties of css flex layout (elastic layout)? The introduction of css flex layout properties has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box-shaped models. Any container can be designated as a Flex layout.
Note: After setting to Flex layout, the float, clear and vertical-align attributes of child elements will be invalid.

Basic concepts

Elements that use Flex layout are called Flex containers (flex containers), referred to as "containers". All its child elements automatically become container members, called Flex items (flex items), or "items" for short.
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.

Container attribute

1. css flex-direction

The flex-direction attribute determines the main axis The direction (that is, the arrangement direction of the items)
flex-direction: row | row-reverse | column | column-reverse
row (default value): 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 upper edge.
column-reverse: The main axis is vertical, and the starting point is at the lower edge.

2. css flex-wrap (line wrap)

flex-wrap By default, items are arranged on a line (also called "axis"). The flex-wrap attribute defines how to wrap if one axis cannot fit.
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (default): no line wrapping.
wrap: wrap, with the first line at the top.
wrap-reverse: wrap, the first line is below.

3. css flex-flow

The flex-flow attribute is the abbreviation of the flex-direction attribute and the flex-wrap attribute. The default value is row nowrap.
flex-flow: || ;

4.justify-content

justify-content attribute definition Aligns the item on the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start (default value): left-aligned
flex-end: right-aligned
center: Center
Space-between: Align both ends, and the intervals between items are equal.
space-around: The space on both sides of each item is equal. Therefore, the space between items is twice as large as the space between items and the border.

5. align-items

The align-items attribute defines how items are aligned on the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start: Align the starting point of the cross axis.
flex-end: Align the end point 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.
​ 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.

6. align-content

The align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property has no effect.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start: with the cross axis aligned with the starting point.
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: The intervals on both sides of each axis are equal. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame.
stretch (default value): The axis occupies the entire cross axis.

Item attributes

1. order

The order attribute defines the order of items. The smaller the value, the higher the ranking. The default is 0.

2, css 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 there is any). If one item's flex-grow property is 2 and the other items are all 1, the former will occupy twice as much remaining space as the other items.
*Can be used to implement two-point and three-point layout

3. css flex-shrink

The flex-shrink attribute defines the reduction ratio of the item, the default is 1, i.e. 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 property 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.

4. css flex-basis

The flex-basis property defines the main axis space (main size) occupied by the item before allocating excess space. The browser uses this attribute to calculate 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.

5. css 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).
It is recommended to give priority to using this attribute instead of writing three separate attributes separately, because the browser will infer the relevant values.

6. align-self

The align-self attribute allows a single item to have a different alignment than other items and can override the align-items attribute. The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

Related recommendations:

##CSSOld versionflexand compatible_html/css_WEB-ITnose

CSS Flex-box sample code_html/css_WEB-ITnose

CSSFlexible box modelflexApplication in layout

The above is the detailed content of What are the properties of css flex layout (elastic layout)? Introduction to css flex layout properties. For more information, please follow other related articles on the PHP Chinese website!