- 首页 > it技术 > >
CSS样式——Flex 弹性盒子模型
- 开启弹性盒子模型
语法：dispaly:flex
容器默认以水平轴为主轴，子元素从左往右排列，纵向轴为侧轴
- 开启弹性盒子模型后对子元素的影响
- 所有子元素默认按照主轴从左往右排列
- 所有子元素在主轴上没有长度（主轴为水平方向时，没有宽度；主轴为垂直方向时，没有高度）
- 所有子元素默认在侧轴上填满长度（侧轴为水平方向时，子元素宽度填满侧轴；侧轴为垂方向时，子元素高度填满侧轴）
- 所有子元素在主轴上从主轴开始位置向结束位置堆叠
- 所有子元素在侧轴上从侧轴开始位置开始堆叠
- 所有子元素默认永不换行，添加元素自动进行均匀挤压，直到子元素内容无法继续挤压，直接溢出盒子
- 设置为弹性盒模型后，所有子元素都将自动成为容器成员，并且float、clear、vertical-aligin 样式都会失效
- 弹性盒子模型作用域父元素上的样式
- 设置主轴和子元素排列方向：
flex-direction
- 以水平轴为主轴，从左往右排列：
row
- 以水平轴为主轴，从右往左排列：
row-reverse
- 以纵向轴为主轴，从上往下排列：
column
- 以纵向轴为主轴，从左往右排列：
row-reverse
- 【CSS样式——Flex 弹性盒子模型】设置主轴方向子元素的排列方式（不改变元素顺序)：
justity-content
- 主轴起始位置对齐：
flex-start
- 主轴中间位置对齐：
center
- 主轴结束位置对齐：
flex-end
- 所有空白填充在两个元素中间（左右两个元素顶格）：
space-between
- 所有空白环绕每个子元素两侧填充：
space-around
- 空白均分填充在子元素之间（IOS支持，安卓不支持）：
space-evenly
- 子元素在侧轴上的排列方式（没有换行的时候只有一行显示）：
align-items
- 侧轴起始位置排列：
flex-start
- 侧轴中间位置排列：
center
- 侧轴结束位置排列：
flex-end
- 设置是否换行：
flex-wrap
- 不换行：
nowrap
- 换行：
wrap
- 逆置换行：
wrap-reverse
flex-direction与flex-wrap复合语法：flex-flow: 排列方向 换行方式- 设置侧轴的排列方式（设置时需要开启换行，在多行时，每一行都是一个 整体，以一行为一个单位进行设置）：
align-content
- 子元素在侧轴起始位置对齐：
flex-start
- 子元素在侧轴中间位置对齐：
center
- 子元素在侧轴结束位置对齐：
flex-end
- 所有空白填充在两个元素中间（上下两个元素顶格）：
space-between
- 所有空白环绕每个子元素两侧填充：
space-around
- 空白均分填充在子元素之间（IOS支持，安卓不支持）：
space-evenly
- 作用在子元素上的样式
- 指定子元素对齐方式：
align-self
- 继承父元素的align-items的对齐方式：auto
- 侧轴起始位置对齐：
flex-start
- 侧轴中间位置对齐：
center
- 侧轴结束位置对齐：
flex-end
- 设置弹性宽度（当前元素占据除固定宽的元素后剩余部分的比例）：
flex
- 设置后内容会被挤压
- 优先挤压设置弹性宽度的元素
- 弹性宽度元素宽度挤压到极限在挤压固定宽度的宽
- 直到所有不能被挤压，直接溢出
- 子元素排列顺序（数字越小，排在越前面）：
order
- 子元素的放大比例（默认为0）：
flex-grow
- 子元素的缩小比例（默认为1）：
flex-shrink
- 分配空余空间之前子元素的默认大小：
flex-basis
flex-grow、flex-shrink、flex-basis复合写法
语法(默认值)：flex:0 1l, auto
值直接写auto表示flex:1 1 auto
值直接写none表示flex:0 0 auto
推荐阅读
