Traditional solution for layout, based on box model , dependency display property+ positionproperty+ floatproperty. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.
In 2009, W3C proposed a new scheme, Flex layout, which can realize various page layouts easily, completely and responsively. Currently, it is supported by all browsers, which means it is safe to use this feature now.
Flex layout will be the go-to for future layouts. This article describes its syntax, and the next article gives Flex notation for common layouts. Netizen JailBreak made a Demo for all the examples in this article , you can also refer to it.
The following content mainly refers to the following two articles: A Complete Guide to Flexbox and A Visual Guide to CSS3 Flexbox Properties .
1. What is Flex Layout?
Flex is the abbreviation of Flexible Box, which means "flexible layout", which is used to provide maximum flexibility for the box model.
Any container can be specified as a Flex layout.
.box{ display: flex; }
Inline elements can also use Flex layout.
.box{ display: inline-flex; }
Webkit-based browsers must be -webkitprefixed.
.box{ display: -webkit-flex; /* Safari */ display: flex; }
Note that after setting to Flex layout float, the clearand vertical-alignproperties of child elements will be invalid.
2. Basic Concepts
Elements that use Flex layout are called flex containers, or "containers" for short. 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 frame) 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 space on the main axis occupied by a single item is called main size, and the space occupied by the cross axis is called cross size.
Third, the properties of the container
The following 6 properties are set on the container.
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction property
flex-directionThe property determines the orientation of the main axis (that is, the direction in which items are arranged).
.box { flex-direction: row | row-reverse | column | column-reverse; }
It may have 4 values.
row(default): The main axis is horizontal, and the starting point is at the left end.row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.column: The main axis is in the vertical direction, and the starting point is at the top edge.column-reverse: The main axis is vertical, and the starting point is at the lower edge.
3.2 flex-wrap property
By default, items are arranged on a line (aka "axis"). flex-wrapAttribute definition, how to wrap if one axis cannot fit.
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
It may take three values.
(1) nowrap(default): Do not wrap.
(2) wrap: Line feed, the first line is above.
(3) wrap-reverse: Line feed, the first line is below.
3.3 flex-flow
flex-flowAttribute is a shorthand for flex-directionattribute and attribute, and the default is .flex-wraprow nowrap
.box { flex-flow: <flex-direction> || <flex-wrap>; }
3.4 justify-content property
justify-contentThe property defines the alignment of the item on the main axis.
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
It may take 5 values, and the specific alignment is related to the direction of the axis. The following assumes that the main axis is left to right.
flex-start(default): left-alignedflex-end: right-alignedcenter: centerspace-between: Both ends are aligned with equal spacing between items.space-around: equal intervals on both sides of each item. So, the spacing between items is twice as large as the spacing between items and the border.
3.5 align-items property
align-itemsProperties define how items are aligned on the cross axis.
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
It may take 5 values. The specific alignment is related to the direction of the cross axis. The following assumes that the cross axis is from top to bottom.
flex-start: The starting point of the cross axis is aligned.flex-end: Align the end point of the cross axis.center: Align the midpoint of the cross axis.baseline: Baseline alignment of the item's first line of text.stretch(default): If the item has no height or is set to auto, it will fill the entire height of the container.
3.6 align-content property
align-contentProperties define the alignment of multiple axes. This property has no effect if the item has only one axis.
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
This property 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: Align with the midpoint of the cross axis.space-between: Align with both ends of the cross axis, and the spacing between the axes is evenly distributed.space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the frame.stretch(default): The axis fills the entire cross axis.
The properties of the project
The following 6 properties are set on the item.
orderflex-growflex-shrinkflex-basisflexalign-self
4.1 order attribute
orderThe property defines the order in which items are sorted. The smaller the value, the higher the ranking, the default is 0.
.item { order: <integer>; }
4.2 flex-grow property
flex-growThe property defines the magnification of the item, the default is 0that if there is remaining space, it will not be enlarged.
.item { flex-grow: <number>; /* default 0 */ }
If all items have a flex-growproperty of 1, they will equally divide the remaining space (if any). If one item has a flex-growproperty of 2 and the other items are all 1, the former will occupy twice as much remaining space as the other items.
4.3 flex-shrink property
flex-shrinkThe property defines the reduction ratio of the item, the default is 1, that is, if there is not enough space, the item will be shrunk.
.item { flex-shrink: <number>; /* default 1 */ }
If the property of all items flex-shrinkis 1, when there is insufficient space, they will be scaled down proportionally. If the flex-shrinkproperty of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.
Negative values are invalid for this property.
4.4 flex-basis properties
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。