1. 伸缩容器 display
- 语法
display: flex | inline-flex
flex: 块伸缩容器
inline-flex:内联伸缩容器
注意：float,clear,vertical-align在伸缩项目上没有效果
2. 伸缩流方向 flex-direction
主要用来定义主轴，从而定义了伸缩项目在容器中的伸缩方向
- 语法
flex-direction: row | row-reverse | column | column-reverse
-
参数功能
-
row：ltr排版下从左向右排列，rtl排版下从右向左
-
row-reverse：与row排列相反
-
column：类似row，方向是从上到下
-
column-reverse：类似于row-reverse，方向是从下到上
-
3. 伸缩换行flex-wrap
主要用来定义伸缩容器里是单行显示还是多行显示，侧轴的方向决定了新行堆放的方向
- 语法
flex-wrap: nowrap | wrap | wrap-reverse
- 参数功能
- nowrap：伸缩容器单行显示，ltr从左到右，rtl从右到左
- wrap：伸缩容器多行显示，ltr从左到右，rtl从右到左
- wrap-reverse：伸缩容器多行显示，ltr从右到左，rtl从左到右（与wrap相反）
4. 伸缩流方向与换行flex-flow
这是flex-direction和flex-wrap属性的简写版,同时定义主轴和侧轴
flex-flow: <'flex-direction'> | <'flex-wrap'>
- 参数功能
- flex-direction：主轴
- flex-wrap：侧轴
注意：flex-flow与writing-mode有直接联系,当使用writing-mode: vertical-rl时转向垂直布局，flex-flow:row将垂直排列伸缩项目，column将水平排列项目
5. 主轴对其justify-content
主要用来设置伸缩项目沿主轴线的对齐方式
- 语法
justify-content: flex-start | flex-end | center | space-between | space-around
- 参数功能
- flex-start：伸缩项目向一行的起始位置靠齐
- flex-end：伸缩项目向一行的结束位置靠齐
- center：伸缩项目向一行中间位置靠齐
- space-between：伸缩项目会平均地分布在行里，第一个项目在开始位置，最后一个项目在终点位置
-
space-around：伸缩项目会平均分布在行里，两端保留一半的空间
justify-content
6. 侧轴对齐align-items和align-self
align-items控制伸缩项目在侧轴的对齐方式，align-self控制伸缩项目自身在侧轴的对齐方式
align-items
- 语法
align-items: flex-start | flex-end | center | baseline | stretch
- 参数功能：
- flex-start：伸缩项目靠侧轴起始边
- flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
- center：伸缩项目的外边距盒在该行的侧轴上居中放置
- baseline：伸缩项目根据伸缩项目的基线对齐
-
stretch：默认值，伸缩项目拉伸填充整个伸缩容器
align-items
align-self
align-self属性主要用来设置单独伸缩项目在侧轴的对齐方式。可以覆盖该伸缩项目的伸缩容器的align-items属性。
- 语法
align-self: flex-start | flex-end | center | baseline | stretch
如果伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果
align-self
7. 堆栈伸缩行align-content
align-content属性会更改flex-wrap的行为，它和align-items相似。主要来调准伸缩行在伸缩容器中的对齐方式，与调准伸缩项目在主轴上对齐方式的justify-content类似。
- 语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
- 参数功能
- flex-start：各行向伸缩容器起点位置堆叠
- flex-end:各行向伸缩容器结束位置堆叠
- center：各行向伸缩容器的中间位置堆叠
- space-between：各行在伸缩容器中平均分布
- space-around：各行在在伸缩容器中平均分布，两边处各有一般的空间
- stretch：默认值，各行将会伸展以占用额外的空间
网友评论