CSS3 伸缩盒模型

天氣不似預期
196 阅读4分钟

1.初始定义

伸缩容器 以下开启flex元素就是开启伸缩容器

display:flex;
display:inline-flex;

伸缩项目 伸缩容器所有子元素自动成为了：伸缩项目。 注意事项：

1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2. 无论原来是哪种元素（块div、行内块、行内span），一旦成为了伸缩项目，全都会“块状化”。

主轴与侧轴

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

主轴方向

  • 属性名：flex-direction
  • 常用值如下：
    1. row(默认值) 主轴方向水平从左到右
    2. row-reverse 主轴方向水平从右到左
    3. column 主轴方向垂直从上到下
    4. column-reverse 主轴方向垂直从下到上 image.png

主轴换行方式

  • 属性名：flex-wrap
  • 常用值:
    1. nowrap：默认值，不换行。
    2. wrap：自动换行，伸缩容器不够自动换行。
    3. wrap-reverse：反向换行。

flex-flow

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

主轴对齐方式

  • 属性名： justify-content
  • 常用值:
    1. flex-start ：主轴起点对齐。—— 默认值
    2. flex-end ：主轴终点对齐。
    3. center ：居中对齐
    4. space-between ：均匀分布，两端对齐（最常用）。
    5. space-around ：均匀分布，两端距离是中间距离的一半。
    6. space-evenly ：均匀分布，两端距离与中间距离一致。

image.png

侧轴对齐方式

一行的情况

  • 属性名： align-items
  • 常用值：
    1. flex-start ：侧轴的起点对齐。
    2. flex-end ：侧轴的终点对齐。
    3. center ：侧轴的中点对齐。
    4. baseline : 伸缩项目的第一行文字的基线对齐。
    5. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

image.png

多行的情况

  • 属性名： align-content
  • 常用值：
    1. flex-start ：与侧轴的起点对齐。
    2. flex-end ：与侧轴的终点对齐。
    3. center ：与侧轴的中点对齐。
    4. space-between ：与侧轴两端对齐，中间平均分布。
    5. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
    6. space-evenly : 在侧轴上完全平分。
    7. stretch ：占满整个侧轴。—— 默认值

image.png

image.png

flex 实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用justify-content和align-items实现水平垂直居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}

方法二：父容器开启flex布局，随后子元素

margin: auto;

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: auto;
}

伸缩性

flex-basis

  • 概念：flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效。
  • 作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高。

flex-grow

flex-grow定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）。

计算规则：
若伸缩容器中三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3
分别瓜分到容器闲置空间的1/6、2/6、3/6空间

flex-shrink

  • 概念： flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。
例如：

三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别为： 1 、 2 、 3

若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px

所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：
1. 计算分母： (200×1) + (300×2) + (200×3) = 1400
2. 计算比例：
项目一收缩值： (200×1) / 1400 = 1/7 * 200
项目二收缩值： (300×2) / 1400 = 3/7 * 300
项目三收缩值： (200x3) / 1400 = 3/7 * 200
avatar
文章
阅读
粉丝