5. box

5. box

5.1 box1

1. `box-sizing: border-box;`

5. 盒子 - 图1

常见的应用场景
    不知道盒子的具体宽度值 width , 盒子的宽度用 百分比 来表示;
    重点关注的不是内容的尺寸, 而是整个盒子可视区的尺寸;

2. `overflow`

overflow mdn

设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。

5. 盒子 - 图2

模拟移动端 overflow-x: auto; 的使用

5. 盒子 - 图3

3. `resize`

resize mdn

如果一个block元素的 overflow 属性被设置成了visible，那么resize属性对该元素无效。

5.2 box2

Flex 阮一峰的网络日志

flex 和 inline-flex

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

<head>
    <meta charset="UTF-8">
    <title>flex 和 inline-flex</title>
    <style>
        div {
            display: inline-flex;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit amet.</div>
    dahuyou
</body>

</html>

5. 盒子 - 图4

5. 盒子 - 图5

5.3 box3

1. `flex-shrink` 计算问题

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

<head>
    <meta charset="UTF-8">
    <title>flex-shrink</title>
    <style>
        #content {
            display: flex;
            width: 500px;
        }

        #content div {
            flex-basis: 120px;
            box-sizing: border-box;
            border: 10px solid rgba(0, 0, 0, .2);
        }

        .box {
            flex-shrink: 1;
        }

        .box1 {
            flex-shrink: 2;
        }

        .box2 {
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
    <p>A, B have flex-shrink:1 set. C has flex-shrink: 2 set. D and E have flex-shrink:2 set</p>
    <p>The width of D and E is less than the others.</p>
    <div id="content">
        <div class="box" style="background-color:red;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box1" style="background-color:yellow;">C</div>
        <div class="box2" style="background-color:brown;">D</div>
        <div class="box2" style="background-color:lightgreen;">E</div>
    </div>
</body>

</html>

5. 盒子 - 图6

分析

这是 mdn 上的一个有关 flex-shrink 的案例 修改了一些数值 通过该案例来了解 flex-shrink 的计算原理
网上的大多数文章都只讲到了它的加权计算问题 但是 它们讲的并不完整 参与加权的数是每一个盒子的 width 值 (但是这是错的)
这里先给出结论 实际上 参与计算的加权的数值 并非 width 或 flex-basis 而是 contentBoxWidth 即: 内容盒的宽度值
这个案例中 的最终结果如下:
    A 和 B
        width: 90px
    C
        width: 80px
    D 和 E
        width: 70px

最终缩放的结果图:

5. 盒子 - 图7

开始时 5 个盒子的宽度值如下表:

盒子	可视区宽度 (包括content padding border)	内容盒宽度 (contentBoxWidth)
A	120px	100px
B	120px	100px
C	120px	100px
D	120px	100px
E	120px	100px

计算过程如下
    1. 先确定要溢出的量是多少
          120px * 5 - 500px = 100px
       将要溢出的尺寸是 100px 也就是说 5个子元素要把这溢出的 100px 给消化掉 每个盒子具体消化多少 是后面计算要确定的值
    2. 再依据每个盒子的 flex-shrink 值 进行加权
       (100px * 1) + (100px * 1) + (100px * 2) + (100px * 3) + (100px * 3) = 1000px
            A             B             C             D             E
       A 占的比重 100px * 1 / 1000px 即 1/10 -> 缩小 10px
       B 占的比重 100px * 1 / 1000px 即 1/10 -> 缩小 10px
       C 占的比重 100px * 2 / 1000px 即 2/10 -> 缩小 20px
       D 占的比重 100px * 3 / 1000px 即 3/10 -> 缩小 30px
       E 占的比重 100px * 3 / 1000px 即 3/10 -> 缩小 30px

       注意: 这里取的宽度值 是 内容盒的宽度值 而非可视区的宽度值 (在这个案例中 虽然取可视区的宽度值来计算 也能得到正确的结果 但是这是错的 [请见下一个案例])

实际参与加权的并非可视区的宽度而是内容盒的宽度

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

<head>
    <meta charset="UTF-8">
    <title>flex-shrink</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            border: 1px solid #ddd;
            display: flex;
        }

        .wrapper div {
            flex-basis: 300px;
            height: 100px;
            box-sizing: border-box;
        }

        .box1 {
            background-color: #008c8c;
            padding: 0 150px;
        }

        .box2 {
            background-color: #f40;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

5. 盒子 - 图8

分析

错误做法
    若宽度取的是盒子的可视区的宽度 那么 由于它们的父级的宽度值为 500px 它们自身的可视区宽度 开始都是 300px 而且它们的 flex-shrink 都是一开始的默认值 1
    所以 结合上述的计算公式 显然可以得知 它们应该平分溢出的这 100px 按这样的逻辑来看的话 .box1 和 .box2 它们应该都缩小 50px
    但是实际结果确实 .box1 没变 而 .box2 被压缩了 100px
正确做法
    由于 .box1 把左右的 padding 设置成了 150px 而且 .box1 和 .box2 都是 border-box
    这就意味着 .box1 的内容盒的宽度没有了 即 内容盒的宽度时 0px 所以此时计算加权值应该这么计算:
       (0 * 1) + (300px * 1) = 300px
        .box1       .box2
    .box1 的缩放值: (1 * 0 / 300px) * 100px 结果是 0
    .box2 的缩放值: (1 * 300 / 300px) * 100px 结果是 100px

2. `flex-basis` 和 `width`

弹性盒子若只写 flex-basis 表示的是这个弹性盒子的 宽度的下限值
width 表示的是该弹性盒子的 宽度的上限值

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

<head>
    <meta charset="UTF-8">
    <title>flex-basis</title>
    <style>
        .wrapper {
            margin: 100px auto;
            width: 400px;
            height: 200px;
            border: 1px solid #ddd;
            display: flex;
        }

        .wrapper div {
            height: 100px;
            /* 每个弹性盒子的宽度下限是 100px */
            flex-basis: 100px;
        }

        .wrapper .flex-box1 {
            /* 第一个弹性盒子的宽度上限是 200px */
            width: 200px;
        }

        .wrapper .flex-box2,
        .wrapper .flex-box3 {
            opacity: 0.9; /* 为了看到第一个盒子中溢出的内容 */
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="flex-box1" style="background-color: #999;">a</div>
        <div class="flex-box2" style="background-color: #666;"></div>
        <div class="flex-box3" style="background-color: #333;"></div>
    </div>
</body>

</html>

5. 盒子 - 图9

5. 盒子 - 图10

5. 盒子 - 图11

注意:
    若弹性盒子的宽度被内容(比如 长英文单词)撑开了 那么即便给它设置了 flex-shrink 它也是不会参与压缩的
    该问题可以通过 work-break: break-word; 来解决 让内容强制换行就行

3. `flex`

flex mdn

felx             flex-grow   flex-shrink     flex-basis
1                1           1               0%
auto             1           1               auto
none             0           0               auto
0 auto(initial)  0           1               auto