CSS3弹性布局flex
传统的布局方式依赖盒状模型,靠 display属性 position属性 float属性,对于特殊布局不方便,比如说垂直居中就比较难实现.
w3c提出了一种新的方案 flex布局,比较简便 完整地实现各种页面布局.尤其是在移动端 小程序等方面.
任意一个容器都可以指定为flex布局,行内元素也可以.
设置Flex 布局以后,float clear 和vertical-align 属性将失效.
基础概念
采用flex布局的元素,称为flex容器,简称容器.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qJBdp8xx-1625031433195)(C:\Users\liu\AppData\Local\Temp\1624854426077.png)]
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做
main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。项目默认沿主轴排列。单个项目占据的主轴空间叫做
main size
,占据的交叉轴空间叫做cross size
。
容器的属性
flex-direction: row/row-reverse/column/column-reverse;
row:(默认值,主轴水平方向,起点在左端)
row-reverse: 主轴在水平方向,起点在右端
column: 主轴在垂直方向,起点在上端
column-reverse: 主轴为垂直方向,起点在下端.
flex-wrap: nowrap/wrap/wrap-reverse
nowrap(项目默认不换行)
wrap:项目换行,第一行在上方
wrap-reverse:项目换行,第一行在下方
flex-flow: 是flex-direction和flex-wrap的缩写,默认是 row
justify-content: flex-star/felx-end/center/space- between/space-around/space-evenly
flex-star:左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐,项目之间的间隔相等
space-around: 每个项目两侧的间隔相等
space-evenly:每个间隙距离相等(兼容处理,用space-between配合before+after使用)
align-items: flex-star/flex-end/center/baseline/stretch
(可能取5个值) flex-star: 交叉轴的起点对齐.
flex-end: 交叉轴的终点对齐.
center: 交叉轴的中心对齐.
baseline: 项目的第一行文字的基线对齐.
stretch:(默认值)如果项目为设置宽度和高度或auto,将沾满整个容器的高度.
align-content: flex-star/flex-end/center/spacebetween/space-around/stretch
flex-star: 与交叉轴起点对齐.
flex-end: 与交叉轴终点对齐.
center: 与交叉轴中点对齐.
space-betweem: 与交叉轴两端对齐,轴线之间的间隔均分.
space-around: 每根轴线两侧的间隔都相等.
stretch:(默认值)轴线占满整个交叉轴.
项目的属性
order: 具体的数值; 数值越小,排列越靠前,默认0
flex-grow:定义项目的放大比例,默认0,按照数值大小比例分配
flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小. (负值)无效
flex-basis: 定义在分配多余空间之前,项目占据的主轴空间(main size).
它可以设为跟width或者height属性一样的值,则项目将占据固定空间.
flex: 0 1 auto;
flex属性是flex-grow,flex-shrink和flex-basis的简写, 后面两个属性可选.建议优先使用复合写法,而不是分开写.
align-self: align-self: auto | flex-start | flex-end | center | baseline | stretch;
(可能取6个值) auto: 默认值,继承父元素的align-items属性,如果没有父 元素,则等同于stretch.
flex-star: 交叉轴的起点对齐.
flex-end: 交叉轴的终点对齐.
center: 交叉轴的中心对齐.
baseline: 项目的第一行文字的基线对齐.
stretch:(默认值)如果项目为设置宽度和高度或auto, 将沾满整个容器的高度.
stretch:(默认值)如果项目为设置宽度和高度或auto, 将沾满整个容器的高度.