flex container
- 相关的css属性
-
flex-flow是felx-direction和flex-wrap的缩写属性
-
flex-direction(决定主轴的方向)
1. row:主轴方向从左到右 默认值
2. row-reverse:主轴方向从右到左
3. column:主轴方向从上到下
4. column-reverse:主轴方向从下到上 -
flex-wrap
1. nowrap:不换行 压缩
2. wrap:换行
3. wrap-reverse:交叉轴方向反转换行 了解即可 -
justify-content(决定flex items在main axis上的对齐方式)
1. flex-start:与main start对齐 默认值
2. flex-end:与main end对齐
3. center:居中对齐
4. space-between:flex items之间的距离相等,与main start、main end两端对齐
5. space-evenly:flex items之间的距离相等,距main start、main end的距离也与flex items之间的距离相等
6. space-around:flex items之间的距离相等,flex items 与main start、main end之间的距离是flex items之间距离的一半 -
align-items(flex items在cross axis上的对齐方式)
1. normal:在弹性布局中,效果和stretch一样
2. stretch:当flex items在cross axis方向的size为auto时,会自动拉伸至填充flex container
3. flex-start:与cross start对齐
4. flex-end:与cross end对齐
5. center:居中对齐
6. baseline:与基准线对齐(与第一个元素第一行文本的基线对齐) -
align-content(多行元素在交叉轴方向上的对齐方式)
1. flex-start:与cross start对齐 默认值
2. flex-end:与cross end对齐
3. center:居中对齐
4. space-between:flex items之间的距离相等,与cross start、cross end两端对齐
5. space-evenly:flex items之间的距离相等,距cross start、cross end的距离也与flex items之间的距离相等
6. space-around:flex items之间的距离相等,flex items 与cross start、cross end之间的距离是flex items之间距离的一半
7. stretch(默认值):与align-items的stretch类似
-
flex items
- 相关的css属性
- flex
- flex-grow
- flex-basis
- flex-shrink
- order:定义flex items排列顺序
- align-self:可覆盖flex container设置的align-items
1. auto:遵从flex container 的设置 默认值
2. stretch、flex-start、flex-end、center、baseline,效果跟align-items一致