Flex HTML layout learning

First, what Flex layout?

Flex is a Flexible Box acronym, meaning "elastic layout", to provide maximum flexibility to the box model.

Any container can be specified as Flex layout.

.box{
  display: flex; } 

Inline elements can also be used Flex layout.

.box{
  display: inline-flex; } 

Webkit core browser, you must add -webkitthe prefix.

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

Note that after the layout is set to Flex, child elements float, clearand vertical-alignattributes will fail.

Second, the basic concept

Using Flex layout elements, called Flex container (flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item), referred to as "project."

Default container exists two axes: a horizontal spindle (main axis) and vertical axis intersect (cross axis). The start position of the spindle (intersection with border) is called main start, the end position is called main end; called cross-axis start position cross start, end position is called cross end.

The default project along the spindle arrangement. A single project called the space occupied by the spindle main size, called the cross-axis space occupied cross size.

Third, the properties of the container

The following six attributes provided on the container.

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

3.1 flex-direction property

flex-directionAttribute decision spindle direction (i.e., arrangement direction of the project).

.box {
  flex-direction: row | row-reverse | column | column-reverse; } 

It may have four values.

• row(Default): The spindle is horizontal, the starting point at the left end.
• row-reverse: The spindle is horizontal, the starting point at the right end.
• column: Spindle vertical direction, the starting point on the edge.
• column-reverse: Spindle vertical direction, along the lower starting point.

3.2 flex-wrap property

By default, items are ranked on a line (also known as "axis"). flex-wrapAttribute definition, if the row axis less than one, how wrap.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse; } 

It may take three values.

(1) nowrap(default): Do not wrap.

(2) wrap: line feed, above the first row.

(3) wrap-reverse: wraps, below the first line.

3.3 flex-flow

flex-flowProperties are flex-directionattributes and flex-wrapshorthand property, the default value row nowrap.

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

3.4 justify-content property

justify-contentAttribute defines the project is aligned on the spindle.

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

It may take five values, and specifically the alignment direction of the shaft concerned. The following assumptions spindle from left to right.

• flex-start(Default value): Left
• flex-end: Align Right
• center: Center
• space-between: Justify, the spacing between the items are equal.
• space-around: Equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border.

3.5 align-items property

align-itemsProperty defines how the items are aligned in the cross shaft.

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

It may take five values. DETAILED alignment direction intersecting the axis-related, cross-axis from top to bottom the following is assumed.

• flex-start: Starting cross-axis alignment.
• flex-end: End cross-axis alignment.
• center: Midpoint of the cross-axis alignment.
• baseline: The first line of text in the project baseline alignment.
• stretch(Default): If the project height is not set or set to auto, occupies the entire height of the container.

3.6 align-content property

align-contentProperty defines a plurality of axes alignment. If the project is only one axis, the property does not work.

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

This attribute may take six values.

• flex-start: The starting point is aligned with the cross shaft.
• flex-end: Aligned with the end of the cross shaft.
• center: Aligned with the midpoint of the cross shaft.
• space-between: Both ends of the cross-axis alignment, the average spacing between the axes of the distribution.
• space-around: Each spaced sides of axis are equal. Therefore, the spacing between the axes twice the size of the interval axis border.
• stretch(Default): axis occupies the entire cross-axis.

Fourth, the project properties

The following six properties set on the project.

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

4.1 order property

orderThe order attribute definition items. The smaller the value, the more forward arrangement, the default is 0.

.item {
  order: <integer>; } 

4.2 flex-grow attributes

flex-growProperty defines an enlarged scale project, by default 0, i.e., if there is free space, not enlarged.

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

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

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属性完全一致