WEB前端|flex布局 css|flex

flex布局

- 基础概念
- 新旧版本
- - 旧版本
  - - 容器的布局方向
    - 容器的排列方向
    - 富裕空间的管理
    - 弹性因子
  - 新版本
  - - 容器的布局方向&容器的排列方向
    - 富裕空间的管理
    - 弹性因子
- 新增属性
- - 容器属性
  - 项目属性
- 课后习题

传统的盒子模型实现左右排列需要借助float和position来实现，但是float可能会引起父级高度塌陷等问题，故在使用float浮动布局后需要清除其带来的影响。
flex布局通过修改父div的display属性，让父元素（容器）成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。
相比于起来flex布局更加的简单便捷，且使用更为广泛。
基础概念什么是容器，什么是项目，什么是主轴，什么是侧轴?

文章图片

我们可以理解为，容器是我们的父级元素，项目是我们的子级元素，主轴就类似于我们坐标轴的x轴，侧轴就类似于我们坐标轴的y轴。

文章图片

记住，项目永远排列在主轴的正方向上！
新旧版本 flex分新旧两个版本：

旧版本：display：-webkit-box
新版本：display：flex

我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex?
移动端开发者必须要关注老版本的flex，因为很多移动端设备内核低只老版本的flex。
【WEB前端|flex布局】老版本的flex通过两个属性四个属性值控制了主轴的位置和方向；新版本的flex通过一个属性四个属性值控制了主轴的位置和方向。
旧版本
容器的布局方向

-webkit-box-orient: horizontal/vertical 控制主轴是哪一根 horizontal: x轴 vertical :y轴

容器的排列方向

-webkit-box-direction: normal/reverse 控制主轴的方向 normal：从左往右(正方向) reverse：从右往左(反方向)

富裕空间的管理只决定富裕空间的位置，不会给项目区分配空间主轴。

主轴：-webkit-box-pack主轴是x轴： start:在右边 end:在左边 center:在两边 justify:在项目之间主轴是y轴： start:在下边 end:在上边 center:在两边 justify:在项目之间侧轴：-webkit-box-algin侧轴是x轴： start：在右边 end：在左边 center：在两边侧轴是y轴： start：在下边 end：在上边 center：在两边

也就是说在老版本中，富裕空间也就是对齐，与我们主轴是谁无关。
弹性因子

-webkit-box-flex：将富裕空间按比例加到项目的width/height上。

新版本
容器的布局方向&容器的排列方向

flex-direction 控制主轴是哪一根，控制主轴的方向 row：从左往右的x轴 row-reverse：从右往左的x轴 column：从上往下的y轴 column-reverse：从下往上的y轴

富裕空间的管理

主轴：justify-contentflex-start：在主轴的正方向 flex-end：在主轴的反方向 center：在两边 space-between：在项目之间 space-around：在项目两边侧轴：align-itemsflex-start:在侧轴的正方向 flex-end:在侧轴的反方向 center:在两边 baseline:基线对齐 stretch:等高布局(项目没有高度)

弹性因子

flex-grow：将富裕空间按比例加到项目的width/height上。

新增属性容器属性

flex-wrap:控制的是侧轴的方向，即当超过时是会溢出还是会换行。 nowrap：不换行 wrap：侧轴方向由上而下(flex-shrink失效) wrap-reverse：侧轴方向由下而上(flex-shrink失效)align-content:多行/列时侧轴富裕空间的管理(把多行/列看成一个整体)！！此属性需要注意优先级！！*侧轴富裕空间的管理*单行单列： align- items align-self (优先级高) 多行多列: align- contentflex-flow: flex-direction和flex-wrap的简写属性本质上控制了主轴和侧轴分别是哪一根，以及他们的方向。

项目属性

order：控制项目的排列顺序 align-self：项目自身富裕空间的管理 flex-basis：伸缩规则计算的基准值(默认是width或height的值)（默认值为auto）flex-grow：将富裕空间按比例加到项目的width/height上。（默认值为0）可用空间= (容器大小-所有相邻项目flex-basis的总和) 可扩展空间= (可用空间/所有相邻项目flex-grow的总和) 每项伸缩大小= (伸缩基准值flex-basis + (可扩展空间 x flex-grow值) )flex-shrink：收缩因子(默认值为1)--.计算收缩因子与基准值乘的总和 var a =每一项flex-shrink*flex-basis之和--.计算收缩因数收缩因数= (项目的收缩因子*项目基准值) /第一步计算总和 var b = (flex-shrink*flex-basis)/a-- .移除空间的计算移除空间=项目收缩因数x负溢出的空间 varC=b *溢出的空间

课后习题这个用flex超级容易实现奥！快来完成吧！