本文共 1997 字,大约阅读时间需要 6 分钟。
代码示例
伸缩布局
执行结果
基本定义
flex-direction属性:用于修改主轴起点的位置。
参数使用
row: 起点在伸缩容器的最左边, 终点在伸缩容器的最右边,从左至右的排版, 默认的取值。row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版。column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版。注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会发生变化column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版。
代码示例
主轴方向
执行结果
justify-content属性
justify-content: flex-start; 主轴上伸缩项对齐的默认值
注意点
按照主轴起点对伸缩项进行排版。按照指定的对齐方式对齐排版好的伸缩项。
代码示例
主轴对齐方式
执行结果
align-items属性
align-items: stretch; 让所有的伸缩项的高度变为侧轴的高度。
注意点
如果需要设置为拉伸对齐, 那么伸缩项不能设置高度。如果伸缩项设置了高度, 那么拉伸对齐就会失效。
代码示例
侧轴对齐方式
执行结果
1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项。
2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的。
flex-wrap属性
默认的取值: flex-wrap 不换行wrap: 放不下就换行 而不是等比压缩wrap-reverse: 放不下就换行 , 以行为单位进行反转
align-content的属性
专门用于设置换行之后的对齐方式,只有伸缩项发生了换行这个属性才有效。
参数列表
flex-start: 换行之后和侧轴的起点对齐, 一行接一行。flex-end: 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作。center: 换行之后和侧轴的中点对齐。space-between: 换行之后在侧轴上两端对齐。space-around: 换行之后在侧轴上环绕对齐。stretch: 以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴。
代码示例
布局换行和换行对齐
执行结果
order属性
用于决定排序的先后顺序,默认情况下所有伸缩项的order属性的取值都是0。
注意点
代码示例
伸缩项排序
执行结果
flex-grow属性
用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器。
注意点
代码示例
伸缩项扩充
执行结果
flex-shrink属性
用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器。
注意点
代码示例
伸缩项缩小
执行结果
flex-basis属性
在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度。
注意点
flex-basis 只有在伸缩布局中才有效。在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效,也就是说flex-basis的优先级要高于width的优先级。在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值, 那么会按照具体的值来显示。
代码示例
伸缩项宽度设置
执行结果
转载地址:http://vabz.baihongyu.com/