Summary of CSS3 flex layout

CSS3 flex layout summary

In 2009, W3C proposed a new solution----Flex layout, which can be simple and complete , implement various page layouts responsively. Currently, it is supported by all browsers.

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.

(Recommended learning: CSS tutorial)

Inline elements can also use Flex layout.

.box{
  display: flex;
}
.box{
  display: inline-flex;
}

It should be noted that browsers with Webkit core must add the -webkit prefix.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

In addition, after setting to Flex layout, the float, clear and vertical-align attributes of child elements will be invalid.

Six properties commonly used in flex layout

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

##1、flex-directionThe attribute determines the direction of the main axis (that is, the arrangement direction of the items).

.box {
  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. flex-wrap<strong></strong>Property definition, if one axis line cannot be arranged, how to wrap it.

.box{
  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. The flex-flow<strong></strong> attribute is the flex-direction attribute and the flex-wrap attribute. Short form, default value is row nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4, justify-content<strong></strong> attribute defines the alignment of the item on the main axis.

-content: flex-start | flex-end | center | space-between | space-

flex-start (default): left-aligned
flex-end: right-aligned
center: centered
space-between : Align both ends, with equal spacing between items.
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.

5, align-items<strong></strong>property defines how items are aligned on the cross axis.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• 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.
• 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<strong></strong> attribute defines the alignment of multiple axes. This property has no effect if the project has only one axis.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

This attribute may take 6 values.

• flex-start: Align with the starting point of the cross axis.
• flex-end: Align 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.
• stretch (default value): The axis occupies the entire cross axis.

There are also the following 6 properties set on the project.

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

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

.item {
  order: <integer>;
}

flex-growThe attribute defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.

.item {
  flex-grow: <number>; /* default 0 */}

If all items have a

flex-grow property of 1, they will equally divide the remaining space (if any). If one item's flex-grow property is 2 and all other items are 1, the former will occupy twice as much remaining space as the other items.

flex-shrinkThe attribute defines the shrinkage ratio of the item. The default is 1, that is, if there is insufficient space, the item will shrink.

.item {
  flex-shrink: <number>; /* default 1 */}

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.

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */}

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

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