html/css-css-布局-flex

FLEX

优点：简便、完整、响应式（多设备显示兼容）

==传统布局方式：display+position+float==

定义

1.全称
Flexible Box，弹性布局，灵活性高（任何容器、行内元素都可以使用）。
注意：子元素的下列属性将失效：float、clear、vertical-align。
webkit内核要加上webkit前缀。
2.基本概念

• Flex容器、项目、主轴main axis、交叉轴cross axis、main start&end、cross start&end、main&cross size

Flex容器: 采用Flex属性的元素
项目: 所有子元素
主轴: main axis，水平
交叉轴: cross axis，竖直
main start&end: Flex容器左右的始终
cross start&end: Flex容器上下的始终
main&cross size: 项目占容器的水平和竖直轴的空间

3.属性
3.1 容器属性

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

flex-direction: row; row-reverse; column; column-reverse;
flex-wrap: nowrap; wrap; wrap-reverse;
flex-flow: direction+wrap, 默认值为row; nowrap;
justify-content: flex-start; flex-end; center; space-between（0A空B空C0）; space-around（空A空空B空空C空）;
align-items[^1]: flex-start; flex-end; center; stretch; baseline;
[1]与交叉轴方向有关，单个
align-content[^2]: flex-start; flex-end; center; stretch; space-between; spacce-around;
[2]使用范围：多交叉轴

3.2 项目属性

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

order: 数值小，靠前
flex-grow: 定义项目的放大比例，默认为0。2>1
flex-shrink[^3]: 定义项目的缩小比例，默认为1。0>1
[3]负值无效
flex-basis: 分配多余空间前，项目占据的主轴空间，默认auto。

.item:{flex-basis:length height;}

flex[^4]: 上述三个的综合。默认值：0 1 auto。快捷值：auto:11 auto;和none: 0 0 auto;
[3]优先使用，较于上述3个值来说。
align-self: 允许单个项目和其他项目对齐方式不一样，可以覆盖align-items，属性为auto（继承父元素）+同align-items。