【前段基础入门之】=＞CSS3新特性 弹性盒子

弹性盒模型简介

• 2009 年， W3C 提出了一种新的盒子模型 —— Flexible Box （伸缩盒模型，又称：弹性盒子）
• 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 …
• 截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持
• 伸缩盒模型的出现，逐渐演变出了一套新的布局方案 —— flex 布局

---

弹性容器、弹性项目

• 弹性/伸缩容器： 开启了 flex 的元素，就是：弹性容器

• 弹性/伸缩项目：伸缩容器所有子元素自动成为了：弹性项目

---

主轴与侧轴

• 主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）
• 侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）

---

主轴的方向

• 属性名： flex-direction

• 常用值如下：

  1. row ：主轴方向水平从左到右 —— 默认值
  2. row-reverse ：主轴方向水平从右到左
  3. column ：主轴方向垂直从上到下
  4. column-reverse ：主轴方向垂直从下到上

---

主轴换行方式

• 属性名： flex-wrap
• 常用属性值如下：

1. nowrap ：默认值，不换行

2. wrap ：自动换行，伸缩容器不够自动换行

3. wrap-reverse：反向换行

补充：

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求

flex-flow: row wrap;

---

主轴对齐方式

• 属性名： justify-content
• 常用值如下：

属性值	描述
flex-start	主轴起点对齐。—— 默认值
flex-end	主轴终点对齐
center	主轴居中对齐
space-between	均匀分布，两端对齐（最常用）
space-around	均匀分布，两端距离是中间距离的一半
space-evenly	均匀分布，两端距离与中间距离一致

---

侧轴对齐方式

单行的情况

• 属性名： align-items
• 常用值如下：

属性值	描述
flex-start	侧轴的起点对齐
flex-end	侧轴终点对齐
center	侧轴居中对齐
baseline	伸缩项目的第一行文字的基线对齐
stretch	如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）`

多行的情况

• 属性名： align-content
• 常用值如下：

属性值	描述
flex-start	与侧轴的起点对齐
flex-end	与侧轴终点对齐
center	与侧轴的中点对齐*
space-between	与侧轴两端对齐，中间平均分布
space-around	伸缩项目间的距离相等，比距边缘大一倍
space-evenly	在侧轴上完全平分
stretch	占满整个侧轴。—— 默认值

            flex-start

       

---

伸缩性

基准长度

• . flex-basis
  • 概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效
    

作用：浏览器根据 flex-basis 属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目的宽或高

拉伸项目

• flex-grow

  • 概念： flex-grow 定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）
  • 规则：
    • 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）
    • 若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、3/6 的空间

压缩项目

• flex-shrink

  • 概念： flex-grow 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小
  • 规则：收缩项目的计算，略微复杂一点，我们拿一个场景举例：

flex 复合属性

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1 auto

• 如果写 flex:1 1 auto ，则可简写为： flex:auto
• 如果写 flex:1 1 0 ，则可简写为： flex:1
• 如果写 flex:0 0 auto ，则可简写为： flex:none
• 如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值

扩展属性

• order : 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0
• align-self
  • 可以单独调整某个伸缩项目的对齐方式
  • 默认值为 auto ，表示继承父元素的 align-items 属性

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————