冷门技巧，看看flex：1的含义

flex

弹性布局

发布日期: 2024-01-25

面试时被问过：“flex: 1 是哪些属性的缩写？”，被问到时，心想：flex：1，不就是子项占有剩余父级空间吗？其实flex还大有门道。

flex：1是哪些属性的缩写

flex：1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写；

flex-grow

flex-grow是将剩余的空间，根据flex-grow的值平分，然后加到flex-basis上

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>flex-grow</title>
  </head>
  <body>
    <p>内容的宽度是500px，flex item的flex-basic是60px。</p>
    <p>A、B 为 flex-grow:1。C和D为 flex-grow:4</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="box1" style="background-color: brown">D</div>
    </div>
  </body>
</html>

那么效果就是子元素的flex-basis加起来是240px，父容器分完以后剩下260px，ABCD的flex-grow加起来10，那么每一份是26px，最终AB是60px + 26px = 86px，CD是60px + 26px * 4 = 164px。

具体举个案例就是甲乙丙丁四兄弟在路上捡到500块钱，兄弟4个来分，老大和老二说“我要60块钱，如果有多的可以再给我来一份”，老三和老四说“我们也要60块钱，如果有多的我们要四份”。最终老大和老二分到86，老三老四分到164，大家还都挺满意

flex-shrink

flex-shrink是将多出的空间根据flex-shrink的值平分，然后flex-basis减去分到的值

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>flex-shrink</title>
  </head>
  <body>
    <p>内容的宽度是500px，flex item的flex-basic是150px。</p>
    <p>A、B 为 flex-shrink:1。C和D为 flex-shrink:4。 </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="box1" style="background-color: brown">D</div>
    </div>
  </body>
</html>