当前位置：首页 > news >正文

css3伸缩盒模型第三章(伸缩相关)

news 来源：原创 2025/5/9 6:34:25

伸缩盒模型第三章(伸缩)

介绍了伸缩性的伸缩提现到哪些方面，以及flex 居中的小技巧，视觉差异等

flex 水平垂直居中
伸缩性
flex 复合式属性
项目排序
侧轴单独对齐

flex 水平居中

我们可以使用flex 使元素居中对齐，当然也可以用 margin 等进行对比，但是比较麻烦

代码

  <title>08.水平垂直居中对齐</title><style>.outer {width: 600px;height: 600px;background-color: #888;/* 开启弹性盒子 */display: flex;/* 方案一   主轴   侧轴对齐 *//* justify-content: center;align-items: center; */}.inner {width: 150px;height: 150px;background-color: pink;/* 方案二 */margin: auto;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>

效果

在这里插入图片描述

方案1

前提一定是需要开启弹性布局，display: flex;

/* 方案一主轴侧轴对齐 */

justify-content: center;

align-items: center;

方案2

/* 方案二 */

margin: auto;

flex-basic 基线

概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。
flex-basis 默认值为 auto

代码

<title>09.基线对齐</title><style>.outer {width: 800px;height: 800px;background-color: #888;display: flex;/* 主轴方向  如果是横向，那么flex-basis代表的就是宽度，高度就失效了 *//* flex-direction: row; *//* 主轴方向  如果是纵向，那么flex-basis代表的就是高度，宽度就失效了  */flex-direction: column;}.inner {width: 200px;height: 200px;background-color: deeppink;border: 1px solid black;}.inner2 {/* 默认值是 auto *//* flex-basis: auto; */flex-basis: 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>

主轴方向

我们设置主轴方向的不同，会让宽或者高失效

主轴横向

flex-direction: row

.inner2 {

/* 默认值是 auto */

/* flex-basis: auto; */

flex-basis: 300px;

}

在这里插入图片描述

结论

主轴方向如果是横向，那么flex-basis代表的就是宽度，高度就失效了,我们设置的每一个项目宽度是200px，但是当我们设置了 flex-basis 为300px的时候，伸缩项目原来的200px宽度就失效了，统一为300px

主轴为纵向

我们可以设置主轴为纵向，也就是上下

flex-direction: column;

.inner2 {

/* 默认值是 auto */

/* flex-basis: auto; */

flex-basis: 300px;

}

在这里插入图片描述

总结

主轴方向如果是纵向，那么flex-basis代表的就是高度，宽度就失效了。每个项目本身是200px，当设置了 flex-basis 后，高度就变为 300px了

伸缩项目(伸)

flex-grow（伸）

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

代码

<title>10.伸缩项目(伸)</title><style>.outer {width: 1000px;height: 700px;background-color: #888;margin: 0 auto;/* 开启弹性布局 */display: flex;/* 主轴方西  默认从左到右边 */flex-direction: row;/* 换行 */flex-wrap: wrap;}.inner {width: 200px;height: 200px;background-color: aqua;border: 1px solid black;box-sizing: border-box;font-size: 30px;text-align: center;/* 开始拉伸 *//* flex-grow: 1; *//* 方式1   1   就是每一个 项目均分剩余的空间  *//* flex-grow: 1; */}/* 方式二  分开设置    我们留下了300px的空间    那么就是所有的 flex-grow来平均分配这些剩下的空间比例值    300 / 6 = 50  inner1 = 50 * 1 = 50px + 200px   = 250px inner2 = 50 * 2 = 100px + 300px   = 400px inner3 = 50 * 3 = 150px + 200px   = 250px */.inner1 {flex-grow: 1;}.inner2 {width: 300px;background-color: deeppink;flex-grow: 2;}.inner3 {flex-grow: 3;}</style>
</head>
<body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body>

案例一

我们将伸缩项目均分

.inner {

width: 200px;

height: 200px;

background-color: aqua;

border: 1px solid black;

box-sizing: border-box;

font-size: 30px;

text-align: center;

/* 开始拉伸 */

/* flex-grow: 1; */

/* 方式1 1 就是每一个项目均分剩余的空间 */

flex-grow: 1;

}

效果

在这里插入图片描述

公式计算

我们设置了父容器盒子为1000px，三个盒子占用的空间为 200 + 300 + 200 = 700 ,也就是说我们还剩余了200px的宽度，这个时候我们设置了 flex-grow为1 就是是均分了剩下的 300 那么就是每个伸缩项目各占100

总等分为 1 + 1 + 1 = 3
300（剩余的空间） / 3 = 100
项目1 = 100 * 1 + 200（自身宽度） = 300px

案例二

我们将每个项目均不同划分，这个时候每个项目分摊后得到的均不相同,分开设置我们留下了300px的空间那么就是所有的 flex-grow来平均分配这些剩下的空间

.inner1 {

flex-grow: 1;

}

.inner2 {

width: 300px;

background-color: deeppink;

flex-grow: 2;

}

.inner3 {

flex-grow: 3;

}

效果

在这里插入图片描述

公式计算

 比例值    300 / 6 = 50  inner1 = 50 * 1 = 50px + 200px   = 250px inner2 = 50 * 2 = 100px + 300px   = 400px inner3 = 50 * 3 = 150px + 200px   = 350px

伸缩项目(缩)

flex-shrink（缩）

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

我们需要将 flex-wrap设置为压缩模式，否则不生效 flex-wrap: nowrap;

背景

我们设置了三个项目，分别为 item1 = 200px item2 = 300px item3 = 200px ，共起来是 700px

容器大小为 400px

压缩空间为 700 - 400 = 300px

我们需要在压缩的300 身上分析每一个均摊了多少

代码

<title>11.伸缩项目(缩)</title><style>.outer {width: 400px;height: 700px;background-color: #888;margin: 0 auto;/* 开启弹性布局 */display: flex;/* 主轴方西  默认从左到右边 */flex-direction: row;/* 默认就是压缩空间    改选项一定要开启   */flex-wrap: nowrap;}.inner {width: 200px;height: 200px;background-color: aqua;border: 1px solid black;box-sizing: border-box;font-size: 30px;text-align: center;/* 均分拉伸剩余空间 */flex-grow: 1;/* 缩小 方式1 均分 *//* flex-shrink: 1; *//* 计算缩小方式   压缩300的空间共计三个伸缩项目    所有的都加起来计算分母  200 * 1  + 300 * 1 + 200 * 1 = 700 inner1 比例   (200 * 1) / 700 =  0.2857inner2 比例   300 * 1 / 700 =  0.4285inner3 比例   200 * 1 / 700 =  0.2857inner1 需要缩小的范围   300 * 0.2857 = 85.714inner2 需要缩小的范围   300 * 0.4285 = 128.57inner3 需要缩小的范围   300 * 0.2857 = 85.714inner1 实际大小为 200 - 85.714 = 114.2857inner2 实际大小为 300 - 128.57 = 171.4285inner3 实际大小为 200 - 85.714 = 114.2857*/}/* 方式2    每一个都不同  *//* 总空间为：  (200 * 1) + (300 * 2) + (200 * 3) = 1400 */.inner1 {/* 所占比例为:      200 * 1 / 1400 = 0.14285需要压缩的空间为：0.14285 * 300 = 42.857剩余的空间为：    200 - 42.857 = 157.14285*/flex-shrink: 1;}.inner2 {width: 300px;background-color: tomato;/* 所占比例为:      300 * 2 / 1400 = 0.42857需要压缩的空间为：0.42857 * 300 = 128.5714剩余的空间为：    300 - 128.5714 = 171.4285*/flex-shrink: 2;}.inner3 {/* 所占比例为:      200 * 3 / 1400 = 0.42857需要压缩的空间为：0.42857 * 300 = 128.5714剩余的空间为：    200 - 128.5714 = 71.428*/flex-shrink: 3;}</style>
</head>
<body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body>

比例均分

我们缩小比例都设置为1 ，这个时候，我们看到1 和3 一样，摊的比我们想象中的要少，按照我们的想象，是不是 1 需要压缩100 ，2也是100 3 也是100 呢，实际不是。具体算法看下方公式

flex-shrink: 1

效果

在这里插入图片描述

计算公式

 计算缩小方式   压缩300的空间共计三个伸缩项目    所有的都加起来计算分母  200 * 1  + 300 * 1 + 200 * 1 = 700 inner1 比例   (200 * 1) / 700 =  0.2857inner2 比例   300 * 1 / 700 =  0.4285inner3 比例   200 * 1 / 700 =  0.2857inner1 需要缩小的范围   300 * 0.2857 = 85.714
inner2 需要缩小的范围   300 * 0.4285 = 128.57
inner3 需要缩小的范围   300 * 0.2857 = 85.714inner1 实际大小为 200 - 85.714 = 114.2857
inner2 实际大小为 300 - 128.57 = 171.4285
inner3 实际大小为 200 - 85.714 = 114.2857

比例不均分

我们将每一个项目压缩比例设置不同，压缩的空间还是300 ，看这些是如何分配的

.inner1 {

flex-shrink: 1;

}

.inner2 {

width: 300px;

background-color: tomato;

flex-shrink: 2;

}

.inner3 {

flex-shrink: 3;

}

效果

在这里插入图片描述

公式计算

总空间为：  (200 * 1) + (300 * 2) + (200 * 3) = 1400 
# 项目1计算      flex-shrink: 1;/* 所占比例为:      200 * 1 / 1400 = 0.14285需要压缩的空间为：0.14285 * 300 = 42.857剩余的空间为：    200 - 42.857 = 157.14285*/# 项目2 计算        flex-shrink: 2;/* 所占比例为:      300 * 2 / 1400 = 0.42857需要压缩的空间为：0.42857 * 300 = 128.5714剩余的空间为：    300 - 128.5714 = 171.4285*/# 项目3 计算           flex-shrink: 3; /* 所占比例为:      200 * 3 / 1400 = 0.42857需要压缩的空间为：0.42857 * 300 = 128.5714剩余的空间为：    200 - 128.5714 = 71.428*/

flex 复合属性

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

注意
- 我们一定要注意顺序，第一个代表为 flex-grow(拉)，flex-shirk(缩)，flex-basis 基线

代码

 <title>12.复合属性flex</title><style>.outer {width: 900px;height: 700px;background-color: #888;margin: 0 auto;/* 开启弹性布局 */display: flex;/* 主轴方西  默认从左到右边 */flex-direction: row;/* 默认就是压缩空间   */flex-wrap: nowrap;}.inner {width: 200px;height: 200px;background-color: chocolate;border: 1px solid black;box-sizing: border-box;font-size: 30px;text-align: center;/* 均分拉伸剩余空间 *//* flex-grow: 1; *//* 均摊压缩空间 *//* flex-shrink: 1; *//* 基线 *//* flex-basis: 100px; *//* 有顺序要求   拉  缩 基线 *//* 写法1  拉伸   缩小   自动  简写  flex: auto *//* flex: 1 1 auto; *//* 写法2   全部都是拉伸的效果   简写 flex: 1 *//* flex: 1 1 0; *//* 写法3  不拉  不缩 高度自动  缩小的里面内容就溢出了 ，大了也不填充简写 flex : none *//* flex: 0 0 auto; *//* 写法4  不拉    可以缩  宽高自动  简写 flex: 0 auto 实际就是默认值 */flex: 0 1 auto;}</style>
</head>
<body><div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div></div>
</body>

写法1

flex: 1 1 auto; 拉伸缩小自动
简写为 flex: auto

在这里插入图片描述

写法2

flex: 1 1 0; 全部都是拉伸的效果
简写 flex: 1

在这里插入图片描述

写法3

flex: 0 0 auto; 不拉不缩高度自动缩小的里面内容就溢出了，大了也不填充
简写 flex : none

在这里插入图片描述

写法4

flex: 0 1 auto; 不拉可以缩宽高自动，实际为默认值
flex: 0 1 auto;

在这里插入图片描述

项目排序与单独对齐

我们可以设置项目的排列顺序已经对齐方式；

代码

<title>13.项目排序与单独对齐</title><style>.outer {width: 900px;height: 700px;background-color: #888;margin: 0 auto;/* 开启弹性布局 */display: flex;/* 主轴方西  默认从左到右边 */flex-direction: row;/* 默认就是压缩空间   */flex-wrap: nowrap;}.inner {width: 200px;height: 200px;background-color: purple;border: 1px solid black;box-sizing: border-box;font-size: 30px;text-align: center;}.inner2 {background-color: aliceblue;order: -3;}.inner4 {/* 排序，默认是0  也就是以写的标签一个一个的排列  */order: -1;/* 对齐  实际上是 侧轴 */align-self: flex-end;}</style>
</head>
<body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div><div class="inner inner4">4</div></div>
</body>