A, CSS3 elastic box
1. Flexible CSS3 box is a new layout pattern.
2.CSS3 flexible pouch (Flexible Box or flexbox), when the page is a need to adapt to different screen sizes and device types of elements have to ensure that when the appropriate behavior layout.
3. The purpose of introducing the flexible pouch layout model to provide a more efficient way to arrange a container of the sub-elements, alignment and distribution of white space.
Second, browser support
1. The figures in the table expressed support for the first version of the browser property.
2. -webkit- followed after the number of browser or -moz- specified prefix.
Three, CSS3 elastic box contents
1. Flexible container by an elastic cassette (Flex container) and the resilient sub-elements (Flex item) composition.
2. Flexible container by setting the display attribute value of the inline-flex, or flex defined as elastic container.
3. Flexible container comprises one or more elastic elements within the sub.
note:
And outer elastic element 1. The elastic sub-container is rendered normal. Flexible box only defines how to lay out the elastic element in the sub-elastic container.
2. The elastic elements are usually sub-display line in the elastic box. By default, each container is only one line.
3. The following shows the elastic element sub-elements displayed on a single line, from left to right:
|
Four, CSS3 elastic properties common box
| Attributes | description |
|---|---|
| display | HTML element types specified box. |
| flex-direction | Specifies neutron elastic container element arrangement |
| flex-wrap | Whether the elastic wrap box sub-element beyond a parent container |
| flex-flow | flex-direction and flex-wrap shorthand |
| align-items | An elastic element disposed cartridge-side alignment of the shaft (longitudinal) direction |
| align-content | Flex-wrap property modifying behavior, similar to align-items, but not the sub-element disposed aligned, but aligned in rows disposed |
| justify-content | The elastic element is aligned on the cassette axis (horizontal axis) direction |
1. flex-direction property
Determine the direction of the project.
Note: If the element is not resilient element box object, the attribute-direction flex ineffective.
|
Property values:
| value | description |
|---|---|
| row | 默认值。元素将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 元素将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |
2. flex-wrap 属性
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定元素不拆行或不拆列。 |
| wrap | 规定元素在必要的时候拆行或拆列。 |
| wrap-reverse | 规定元素在必要的时候拆行或拆列，但是以相反的顺序。 |
| .flex-container { flex-wrap: nowrap | wrap | wrap-reverse; } |
可以取三个值：
（1） nowrap (默认)：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
3. flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
| .flex-container { flex-flow: <flex-direction> <flex-wrap> } |
4. align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
5. justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
五、弹性子元素属性
| 属性 | 描述 |
|---|---|
| order | 设置弹性盒子的子元素排列顺序。 |
| flex-grow | 设置或检索弹性盒子元素的扩展比率。 |
| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 |
| flex-basis | 用于设置或检索弹性盒伸缩基准值。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
1. order属性
| .flex-container .flex-item { order: <integer>; } |
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。
2. flex-grow属性
| .flex-container .flex-item { flex-grow: <integer>; } |
<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
3. flex-shrink属性
| .flex-container .flex-item { flex-shrink: <integer>; } |
<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
4. flex-basis属性
| .flex-container .flex-item { flex-basis: <integer> | auto; } |
<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。
5. flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
| .flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; } |
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他元素进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他元素进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。 |
| inherit | 从父元素继承该属性。 |
6. align-self属性
| .flex-container .flex-item { align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; } |
| 值 | 描述 |
|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 |
| stretch | 元素被拉伸以适应容器。 |
| center | 元素位于容器的中心。 |
| flex-start | 元素位于容器的开头。 |
| flex-end | 元素位于容器的结尾。 |
| baseline | 元素位于容器的基线上。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
取值参考 align-items即可
资料参考链接：