search

zlx362211854 / daily-study

每日一个知识点总结，以issue的形式体现
10 stars 6 forks source link

126. flex 属性 #183

Open goldEli opened 4 years ago

goldEli commented 4 years ago

如下代码，当 container 的宽度大于、等于、小于 340px 时，item 的宽度会发生怎样的变化？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        outline: 1px solid red;
      }
      .container{
        display: flex;
      }
      .item1{
        flex: 0 2 100px;
      }
      .item2{
        flex: 0 1 100px;
      }
      .item3{
        flex: 0 1 100px;
      }
      .item4{
        flex: 3 0 20px;
      }
      .item5{
        flex: 2 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <item class="item1">item1</item>
      <item class="item2">item2</item>
      <item class="item3">item3</item>
      <item class="item4">item4</item>
      <item class="item5">item5</item>
  </div>
  </body>
</html>
goldEli commented 4 years ago

先来看看 flex 三个属性代表什么意思

{
  flex : flex-grow || flex-shrink || flex-basic
}

所以： 1）当 container 的宽度大于 340px，假设尺寸为 400px，则尺寸富余60px：

富余部分按照3:2 分配给 item4、item5 item1=100、item2=100、item3=100、item4=20+60/53、item5=20+60/52

2）当 container 的宽度小于 340px，假设尺寸为 300px，则尺寸差40px：

item1、item2、item3 按照 2:1:1 的比列拿出 40px，补给 item4，item5 item1=100-40/42、item2=100-40/41、item3=100-40/4*1，item4=20、item5=20

3）当 container 的宽度等于 340px

尺寸刚刚好，按固定值分配 item1=100、item2=100、item3=100、item4=20、item5=20

Reference

CSS flex属性深入理解