Flex的通常使用方法

Flex的通常使用方法

1. 使用场景

弹性布局的原理就讲了，说说我个人使用的场景。

1.1 将一个盒子中内容按比例分开

这种场景基本很常见，例如如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup></script>
<template>
    <div class="A">
        <div class="Bdiv">我是B</div>
        <div class="Cdiv">我是C</div>
    </div>
</template>
<style scoped>
.A{
	flex：1；
    display: flex;
    flex-direction: column;
}
.Bdiv{
    flex:3;
}
.Cdiv{
    flex:7;
}
</style>

  • 首先Adiv也可能是嵌入某个div的盒子，所以高设定为flex为1则自动展开，而展开的内容区再嵌入两个盒子，按flex3和7分开。

  • 众所周知flex的含义是： flex-grow、flex-shrink 和 flex-basis的简写。

  • 所以Bdiv的flex为： flex-grow：3、 flex-shrink：1、 flex-basis：0%

  • 所以Cdiv的flex为： flex-grow：7、 flex-shrink：1、 flex-basis：0%

按未设置Bdiv和Cdiv的高度，则它们两个将自动伸出30%和70%，并且因为flex-basis是0%。
乍一看感觉没什么问题，但是0%却在某些时候影响伸性，所以最好若只是想以容器大小分开则应该如下设定：

1
2
flex:具体比例 1 0;
overflow: hidden;

这样子即可保证内容高度不会撑开容器。

2.思考

  • 那么0和0%有什么区别呢？

flex-basis: 0

  • 解释: flex-basis: 0 表示子元素的基础尺寸为 0，意思是它的主轴尺寸（宽度或高度，取决于 flex-direction）从 0 开始计算。
  • 效果: 由于基础尺寸是 0，子元素的大小完全依赖于 flex-grow 属性的值。因此，flex-grow 的值会直接决定元素在剩余空间中的占比。
  • 用法: 通常用于需要子元素均匀分配剩余空间的场景，而不考虑其内容或初始大小。

flex-basis: 0%

  • 解释: flex-basis: 0% 表示子元素的**基础尺寸为其父容器主轴方向上的 0%**。
  • 效果: 在大多数情况下，flex-basis: 0% 会类似于 flex-basis: 0，因为它也让 flex-grow 来决定元素大小。
  • 用法: 常用于需要根据父容器的尺寸或其他子元素的尺寸进行动态调整的场景。

那既然最终结果看起来都是为0，为什么显示的效果不一样呢？
百度还发现了有人详细解释过这个问题， flex-basis属性之0px与0%的差异

简单讲一下，就是父容器未设置高度时， 0% 这个百分比数值被解析为了 content，导致（在主轴方向上）Cdiv 里的子元素有多长，它就会被撑开多长。

而我在看CSS3笔记时，注意到了如果写 flex:1 1 0 ，则可简写为： flex:1，但在实际输入后在浏览器渲染后却变成flex:1 1 0% 的问题，这篇文章也解释了。

那么用0会出现什么问题呢？
说到底毕竟div的高度基本都是为了内容展示所控制的，不过当上面例子的C若是设置了高度时，为0时则高度会塌陷，上面的链接也基本解释了这个问题。

  • flex-shrink不设置是否有什么影响？
    收缩性并不会实际把div中实际的内容缩写，例如图片或者文字，那么为了避免溢出则设置overflow: auro。

这样子看上去确实收缩性一点用处都没，那么它存在的意义又是什么呢。
于是我想了想收缩性是为了，子div的内容大小由div控制，那么当父div高度不够，子div也会相应的收缩，从而改变div内容的大小。
而子容器的高度通常由内容决定，flex-shrink 的作用可能不如 flex-grow 明显。
但在空间不足的情况下，它仍然是一个重要的属性，用于控制子元素的收缩行为。

W3C制定这些属性的想法可能是，不一定有太大用处，但是必须得有。

  • 容器宽高是否应该设置？
    虽然弹性布局和栅格布局可以不设置具体宽高来划分div区域，但是我觉的最外层的父容器还是得设置宽或者高为100vh，并减去页眉或者导航栏之类的高度。
    而且对于一些特殊网站的设计，版心宽度也是有最大值，具体怎么设置还是得看网站要求。