css3弹性布局模式

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,  将沾满整个容器的高度.