flex弹性盒模型布局

1.认识flex布局

目前web开发中使用最多的布局方案:

目前特别在移动端用的最多,pc端也用的越来越多了

2.两个重要概念:

开启了flex布局的元素叫flex containner

flex container 里面的直接子元素叫做 flex items

3.开启flex布局

display:flex;    //  成为了flex container    此元素成为块级元素  此元素成为弹性容器,子元素不再遵守普通流文档排列,子元素默认高度为父级元素高度,;默认宽度为零,在子元素宽度和不超过父元素,正常显示,若超过父级元素就按比例收缩各自的宽度
display:inline-flex;      // 此元素成为行内元素  其余同上

这张图很重要理解了图,也就学会了一半


flex布局.png

主轴:main axis main start 开始位置 main size 主轴大小

交叉轴:cross axis main start 开始位置 cross size 交叉轴大小

以上是默认情况,根据属性的设置会发生变化

4.flex container 容器的相关属性

开启了flex 布局后 子元素无论是块级元素还是行内元素均按照flex布局进行布局

flex items 默认都是沿着main axis(主轴)从 main start开始往main end方向排布

(1)flex-direction 决定主轴方向 默认值:row

flex-direction:row;  //默认值 从左向右方向
flex-direction:row-reverse;   // 从右到左
flex-direction:column;      // 从上到下
flex-direction:column-reverse;   // 从下到上

(2)justify-content 决定了flex items 在 main axis 上的对齐方式 默认值:flex-start

justify-content:flex-start;       // 与 main start 对齐 主轴开始侧
justify-content:flex-end;        // 与 main end 对齐   主轴结束侧
justify-content:center;       // 居中对齐
justify-content:space-between;       //两端对齐中间间隔距离相同
justify-content:space-evenly;        //元素之间间隔相同对齐
justify-content:space-around;       // 元素两边间隔相同对齐   

(3)align-items 决定了flex items 在 cross axis 上的对齐方式 默认值:normal

align-items:normal;    //在弹性布局中,效果跟stretch一样   高度不一致时,顶部对齐
align-items:stretch;  //当flex items 在 cross axis 方向的size为auto时,会自动拉伸填充flex container 
align-items:flex-start;    //  交叉轴开始侧对齐
align-items:flex-end;     // 交叉轴结束侧对齐
align-items:center;    //居中对齐
align-items:baseline;    // 与继基线对齐

(4)flex-wrap 决定了flex container 是单行还是多行 默认值:nowrap

flex-wrap:nowrap;    //  单行
flex-wrap:wrap;     //  多行
flex-wrap:wrap-reverse;   // 多行 (对比wrap,cross start 与 cross end 相反)  

(5)flex-flow 是 flex-direction || flex-wrap 的简写

flex-flow: row-reverse wrap;

(6) align-content决定了多行flex items在cross axis 上的对齐方式,用法与justify-content类似, 默认值:stretch

align-content:stretch;   //与align-items的stretch类似  默认值
align-content:flex-start;     // 与cross start 对齐
align-content:flex-end;    // 与cross end对齐
align-content:center;    //居中对齐
align-content:space-between;    //flex items之间的距离相等
                                cross start、cross end两端对齐
align-content:space-around;   // flex items之间的距离相等flex items与cross start、cross end之间的距离是flex items之间距离的一半
align-content:space-evenly;   //flex items之间的距离相等 flex items 与cross start、cross end 之间的距离等于flex items之间的距离  

5.flex items项目元素的相关属性

(1)order 决定元素的显示顺序 默认值:0

order: 可以设置任意整数(正整数、负整数、0),值越小就越排在前面  默认值为0 

(2)align-self , flex items可以通过align-self覆盖flex container设置的align-items 默认值auto

align-self:auto;   //遵从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline,效果跟align-items一致 // 会覆盖父元素设置的align-items

(3) flex-grow 决定了 flex items 如何扩展

  • 可以设置任意非负数字(正小数、正整数、0),默认值是0
  • 当flex container在 main axis方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的 flex-grow总和sum超过1,每个flex item扩展的size为:

flex container的剩余size * flex-grow / sum

如果所有flex items的 flex-grow总和不超过1,每个flex item 扩展的size为:

flex container的剩余size * flex-grow

flex items扩展后的最终size 不能超过max-width\max-height

(4)flex-shrink 决定了 flex items 如何收缩

  • 可以设置任意非负数字(正小数、正整数、0),默认值是1

  • 当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效

如果所有flex items 的flex-shrink总和超过1,每个flex item 收缩的size为

  • flex items超出flex container的size *收缩比例/所有flex items的收缩比例之和

如果所有flex items的flex-shrink总和sum 不超过1,每个flex item收缩的size为

  • flex items超出flex container的size * sum*收缩比例/所有flex items的收缩比例之和

  • 收缩比例= flex-shrink * flex item的base size

  • base size就是flex item放入flex container之前的size

flex items收缩后的最终size不能小于min-width\min-height

(5)flex-basis用来设置flex items在main axis方向上的base size

  • auto(默认值)、具体的宽度数值(100px )

(6)决定flex items最终base size的因素,从优先级高到低

  • max-width\max-height\min-width\min-height

  • flex-basis

  • widthheight

  • 内容本身的size

(7)flex是flex-grow || flex-shrink || flex-basis的简写,flex属性可以指定1个,2个或3个值。

单值语法:值必须为以下其中之一:

  • 一个无单位数(<number>):它会被当作<flex-grow>的值。

  • 一个有效的宽度(width)值:它会被当作<flex-basis>的值。

  • 关键字none , auto或initial.

双值语法:第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。

第二个值必须为以下之一:

  • 一个无单位数:它会被当作<flex-shrink>的值。

  • 一个有效的宽度值:它会被当作<flex-basis>的值。

三值语法:

  • 第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。

  • 第二个值必须为一个无单位数,并且它会被当作<flex-shrink>的值。

  • 第三个值必须为一个有效的宽度值,并且它会被当作<flex-basis>的值。

4.小练习

https://flexboxfroggy.com/#zh-cn 这是一个用来练习flex布局的小游戏

推荐阅读更多精彩内容