flex layout notes

I feel more and more deeply the necessity of completing daily tasks. A long time ago, I made a memo saying that I should learn flex layout deeply. I didn't expect it to be delayed until this time!

One, what is flex layout:

Flex layout is flexible box layout, that is, flexible box model or flexible layout, the purpose is to provide maximum flexibility for the box model.

After an element is set to flex, the float, clear and vertical-align of its children will be invalid.

Any element can be specified as flex layout, and inline elements can also be specified as flex layout. If it is a browser with a webkit core, a -webkit prefix should be added. The example is as follows:

.block-flex{
	display: flex;
	display: -webkit-flex;
}
.inlne-flex{
	display: inline-flex;
	display: -webkit-inline-flex;
}

The difference between inline and block-level flex:

Second, some basic concepts of flex layout:

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:

flex-direction : The property determines the direction of the main axis (that is, the direction in which items are arranged). There are four optional values:row | row-reverse | column | column-reverse。

• 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.

flex-wrap : By default, items are arranged on a line (aka "axis"). flex-wrapAttribute definition, how to wrap if one axis cannot fit. There are three optional values:nowrap | wrap | wrap-reverse;

(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.

flex-flow : flex-flowProperties are shorthand for flex-directionproperties and properties, the default is .flex-wraprow nowrap

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

justify-content : justify-contentThe property defines the alignment of items on the main axis. There are five optional values: flex-start | flex-end | center | space-between | space-around。


• flex-start(default): left-aligned
• flex-end: right-aligned
• center: center
• space-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.

align-items : align-itemsProperty defines how items are aligned on the cross axis. There are five optional values:flex-start | flex-end | center | baseline | stretch。


• 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.

align-content : align-contentThe property defines the alignment of multiple axes. This property has no effect if the item has only one axis. It has six default values:flex-start | flex-end | center | space-between | space-around | stretch。


• 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.

Fourth, the properties of the project:

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow：属性定义项目的放大比例，默认为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.

flex-shrink：属性定义了项目的缩小比例，默认为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.

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

It can be set to the same value as the widthor heightproperty (such as 350px), and the item will occupy a fixed space.

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

flex : The flexproperty is shorthand for flex-grow,  flex-shrink and  flex-basis, with the default value 0 1 auto. The last two properties are optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

 align-self：align-selfAttributes allow individual items to have a different alignment than other items, overriding align-itemsattributes. The default value is auto, which means inherit the align-itemsproperties of the parent element, if there is no parent element, it is equivalent to stretch.

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

 

Original link: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html