弹性盒子模型（Flexible Box）6个属性
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • flex-items
  • flex-content
flex-direction 属性 (主轴的方向)
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-direction:row; （默认值）主轴横向，起点左→右。
1
2
3
4
5
flex-direction:row-reverse; 主轴横向，起点右→左。
1
2
3
4
5
flex-direction:column; 主轴纵向，起点上→下。
1
2
3
4
5
flex-direction:column; 主轴纵向，起点下→上。
1
2
3
4
5
flex-wrap 属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap:nowrap; （默认）不换行。超出容器，元素宽度可能被压缩
1
2
3
4
5
6
7
8
9
10
11
12
flex-wrap:wrap; 换行，第一行在上方。
1
2
3
4
5
6
7
flex-wrap:wrap-reverse; 换行，第一行在下方。
1
2
3
4
5
6
7
justify-content 属性
justify-content属性定义了项目在主轴上的对齐方式，有五种属性。
justify-content: flex-start; （默认）左对齐
1
2
3
justify-content: flex-end; 右对齐
1
2
3
justify-content: center; 居中
1
2
3
justify-content: space-between; 两端对齐，项目之间的间隔都相等。
1
2
3
justify-content: space-around; 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
1
2
3
align-items 属性
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start; 交叉轴的起点对齐
1
2
3
align-items: flex-end; 交叉轴的终点对齐
1
2
3
align-items: center; 交叉轴的中点对齐
1
2
3
align-items: baseline; 项目的第一行文字的基线对齐。例如项目1 加了个 margin-top:10px;
1
2
3
align-items: stretch; （默认）如果项目未设置高度或设为auto，将占满整个容器的高度。
1
2
3