伸缩容器的属性
1.display
- flex 块级伸缩容器
- inline-flex 行内级伸缩容器
2.flex-direction(方向)
- row 从左到右的方向
- row-reverse 相反的方向(从右刀左)
- column 从上到下的方向
- column-reverse 从下到方向
3.flex-wrap (伸缩容器在主轴线方向空间不足的情况下,是否换行及其如何换行)
- wrap 自动换行
- norap 不管怎样不换行
- wrop-reverse 自动换行 以反方向换
4.flex-flow(是flex-direction和flex-wrap的缩写)默认值是 row nowrap (横向,不缩)
5.justify-content(在主轴线上的对齐方式)
- flex-start 左对齐(起始位置)
- flex-end 右对齐
- center 中间对齐
- space-between 平均分布在界面上
- space-around 中间的间距=两边的边距相加
6.align-items(交叉轴的对齐方式)
- flex-start 已交叉轴开始的位置对齐
- flex-end 以交叉轴结束的位置进行对齐
- baseline 以基准线对齐
- stretch 已拉伸的效果展示
7.align-content 换行后在交叉轴上的对齐方式 前提是要开启换行
- flex-start (起始位置)
- flex-end (结束位置)
- center 中间对齐
- space-between 平均分布在界面上
- space-around 中间的间距=两边的边距相加
- stretch 默认值 已拉伸的效果展示
[传送门 ] (https://github.com/songjiabin/flex/blob/master/flex.html)
网友评论