Flex 网页布局

容器

1. flex-direction:row（改变主轴的方向，并不是把子元素(flex项)从主轴移到交叉轴上对齐，而是让主轴自身从水平变成垂直）
• row
• row-reverse
• column
• column-reverse
2. flex-wrap:nowrap（是否换行）
• nowrap（默认单行/单列，不拆行/不拆列）
• wrap（换行）
• wrap-reverse（反向）
3. flex-flow:row nowrap（复合属性=方向 换行=flex-drection flex-wrap）
4. justify-content:flex-start（元素在主轴上的对齐，主轴可能水平，也可以垂直）
• flex-start（默认值，左对齐）
• flex-end（右对齐）
• center（居中）
• space-between（两端对齐，项目之间的间隔都相等）
• space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍）
5. align-content:stretch（交叉轴，对齐轴线！flex-wrap 会影响，如果=wrap，即使只有一行，也会起作用。若=nowrap，则不起作用！对齐轴线，多根轴线的对齐方式）
• stretch（默认值。元素被拉伸以适应容器）
• flex-start
• flex-end
• center
• space-between
• space-around
6. align-items:stretch（元素在每个交叉轴上的对齐，只作用在每一轴线上）：
• stretch（默认值；使每个元素的高度占据整个交叉轴，元素的高度不设置，或者设置为auto；否则 height 属性将会覆盖该 stretch）
• flex-start
• flex-end
• center
• baseline（使每个元素按照他们段落标签的文本基线 baseline 对齐）

元素

1. flex-grow:0
• 放大，扩展比率，剩余宽度分配，在初始值基础上扩展，值是一个数字，无单位，默认=0，不会自动扩展
2. flex-shrink:1
• 缩小，收缩比率，元素宽度之和大于盒子宽度（剩余宽度为负值），收缩，默认=1；会考虑元素本身的宽度，如果不考虑，会缩小到0
3. flex-basis:auto
• 主轴上的伸缩基准值，默认; auto，等于元素width/height的长度，若没有设置，根据内容块确定;具体数值，或者百分比，规定初始长度；
4. flex:0 1 auto
• 复合属性，默认值=0 1 auto
• flex = flex-grow + flex-shrink + flex-basis；
• flex:1=flex:1 1 0 | flex:2 = flex:2 1 0 | flex:auto=flex:1 1 auto | flex:none=flex:0 0 auto
5. align-self: auto | flex-start | flex-end | center | baseline | stretch;
6. order: 控制项目在 flex 容器中的显示顺序