CSS3伸缩盒模型之伸缩容器和伸缩项目、主轴、侧轴

一枚前端成长路上的小飞侠

于 2024-07-08 22:23:14 发布

阅读量709

点赞数 20

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_64536562/article/details/140280066

版权

一、伸缩容器和伸缩项目

伸缩容器: 设置了display: flex 的元素，就是伸缩容器。

1.给元素设置: display:flex 或 display:inline-flex，该元素就变为了伸缩容器。

2.display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。

3.一个元素可以同时是:伸缩容器、伸缩项目。

伸缩项目:伸缩容器所有子元素自动成为了伸缩项目。

1.仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。

2.无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会“块状化”。

二、主轴、侧轴方向

1.主轴与侧轴

主轴: 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是:从左到右(左边是起点，右边是终点)。

侧轴: 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是:从上到下(上边是起点，下边是终点)。

2.主轴方向

属性名:flex-direction

常用值如下:

(1) row :主轴方向水平从左到右--默认值

(2) row-reverse :主轴方向水平从右到左。

(3) column:主轴方向垂直从上到下。

(4) column-reverse:主轴方向垂直从下到上。

注意：改变了主轴的方向，侧轴方向也会随之改变

三、主轴对齐方式和换行方式

1.主轴对齐方式

属性名：justify-content

常用值如下:

(1) lex-start:主轴起点对齐。-- 默认值

(2) flex-end:主轴终点对齐

(3) center:居中对齐

(4) space-between:均匀分布，两端对齐(最常用)。

(5) space-around:均匀分布，两端距离是中间距离的一半。

(6) space-evenly :均匀分布，两端距离与中间距离一致。

2.主轴换行方式

属性名：flex-wrap

(1) nowrap：默认值--不换行

(2) wrap：伸缩容器不够时自动换行

(3) wrap-reverse：反向换行

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
    }

    .outer {
      width: 1000px;
      height: 600px;
      background-color: gray;
      /* 开启flex布局，将该元素变为伸缩容器 */
      display: flex;

      /* 主轴方向：从左到右 */
      /* flex-direction: row; */

      /* 主轴换行方式：换行*/
      flex-wrap: wrap; 

      /* 复合属性flex-flow */
      /* flex-flow: row wrap; */

      /* 主轴对齐方式，主轴的起始位置——默认 */
      justify-content: flex-start;
      /* 主轴对齐方式，主轴的结束位置 */
      justify-content: flex-end;
      /* 主轴对齐方式，中间对齐 */
      justify-content: center;
      /* 主轴对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
      justify-content: space-around;
      /* 主轴对齐方式，项目均匀的分布在一行中，项目与项目之间的距离相等，项目距边缘没有距离 */
      justify-content: space-between;
      /* 主轴对齐方式，项目均匀的分布在一行中 */
      justify-content: space-evenly;
    }

    .inner {
      background-color: skyblue;
      width: 200px;
      height: 200px;
      border: 1px solid black;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</body>

</html>

四、侧轴对齐方式

（只有一行的情况）

所需属性：align-items

常用值如下:

1.f1ex-start:侧轴的起点对齐。

2.flex-end:侧轴的终点对齐。

3.center:侧轴的中点对齐。

4.baseline:伸缩项目的第一行文字的基线对齐。

5.stretch:如果伸缩项目未设置高度，将占满整个父容器的高度。--(默认值)

( 多行的情况)

所需属性：align-content

常用值如下:

1.flex-start:与侧轴的起点对齐。

2.flex-end:与侧轴的终点对齐。

3.center :与侧轴的中点对齐。

4.space-between:与侧轴两端对齐，中间平均分布。

5.space-around:伸缩项目间的距离相等，比距边缘大一倍。

6.space-evenly:在侧轴上完全平分。

7.stretch:占满整个侧轴。-- 默认值

五、伸缩盒模型——伸

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

规则:

1、若所有伸缩项目的 flex-grow 值都为1，则:它们将等分剩余空间(如果有空间的话)。

2、若三个伸缩项目的 flex-grow值分别为:1、2、3，则:分别瓜分到:1/6、2/6、3/6 的空间。

六、伸缩盒模型——缩

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

收缩项目的计算，略微复杂一点，拿一个场景举例:

例如:

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

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

所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算:

1.计算分母:(200*1)+(300*2)+(200*3)=1400

2.计算比例:

项目一:(200x1)/1400=比例值1

项日二:(300x2)/1400=比例值2

项日三:(200x3)/1400=比例值3

3.计算最终收缩大小:

项目一需要收缩:比例值1x300

项目二需要收缩:比例值2x300

项目三需要收缩:比例值3x300

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
    }

    .outer {
      width: 1000px;
      height: 600px;
      background-color: gray;
      /* 开启flex布局，将该元素变为伸缩容器 */
      display: flex;
      justify-content: flex-start;
    }

    .inner {
      background-color: skyblue;
      width: 200px;
      height: 200px;
      border: 1px solid black;
      box-sizing: border-box;
      /* 伸 */
      flex-grow: 1;
      /* 缩 */
      flex-shrink: 1;
    }

    .inner2 {
      width: 300px;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner inner2">2</div>
    <div class="inner">3</div>
  </div>
</body>

</html>

一枚前端成长路上的小飞侠

关注

20
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3伸缩盒模型之伸缩容器和伸缩项目、主轴、侧轴

伸缩容器: 设置了的元素，就是伸缩容器。1.给元素设置: display:flex 或 display:inline-flex，该元素就变为了伸缩容器。2.display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。3.一个元素可以同时是:伸缩容器、伸缩项目。伸缩项目:伸缩容器所有子元素自动成为了伸缩项目。1.仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
复制链接

扫一扫