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

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

news 来源：原创 2025/8/12 18:45:19

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

介绍了伸缩性的伸缩提现到哪些方面，以及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>

项目排序

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。

.inner4 {

/* 排序，默认是0 也就是以写的标签一个一个的排列 */

order: -1;

}

.inner2 {

background-color: aliceblue;

order: -3;

}

在这里插入图片描述

单独对齐

通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
默认值为 auto ，表示继承父元素的 align-items 属性。

.inner4 {

/* 排序，默认是0 也就是以写的标签一个一个的排列 */

order: -1;

/* 对齐实际上是侧轴 */

align-self: flex-end;

}

在这里插入图片描述

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

flex 水平居中

代码

效果

方案1

方案2

flex-basic 基线

代码

主轴方向

主轴横向

结论

主轴为纵向

总结

伸缩项目(伸)

代码

案例一

效果

公式计算

案例二

效果

公式计算

伸缩项目(缩)

背景

代码

比例均分

效果

计算公式

比例不均分

效果

公式计算

flex 复合属性

代码

写法1

写法2

写法3

写法4

项目排序与单独对齐

代码

项目排序

单独对齐

相关文章：