如何将Flex容器的宽度确定为等于flex项的宽度？

Question

​

.container {
  display: flex;
  border: 5px solid blue;
  height: 200px;
  flex-wrap:wrap;
  width: fit-content;
  
  .div-1 {
    border: 5px solid red;
    width: 230px;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
  }
   .div-6 {
    border: 5px solid green;
    width: 200px;
  }
   .div-7 {
    border: 5px solid green;
    width: 400px;
  }
   .div-8 {
    border: 5px solid green;
    width: 400px;
  }
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
  <div class="div-6"></div>
  <div class="div-7"></div>
  <div class="div-8"></div>
</div>

​

我希望将flex容器的宽度设置为等于flex项的宽度，这样在末尾就没有剩余的空空间了。

随附守则以供参考。在这里，我想将容器的宽度固定为等于前6个div之和的宽度。

​

.container {
  display: inline-flex;
  border: 5px solid blue;
  height: 200px;
  width: fit-content;
  flex-wrap: wrap;
  
  .div-1 {
    border: 5px solid red;
    width: 230px;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
  }
  .div-6 {
    border: 5px solid green;
    width: 200px;
  }
  .div-7 {
    border: 5px solid green;
    width: 400px;
  }
  .div-8 {
    border: 5px solid green;
    width: 300px;
  }
  
}

.next-line {
  height: 100px;
  border: 5px solid orange;
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
    <div class="div-6"></div>
    <div class="div-7"></div>
    <div class="div-8"></div>
</div>
<div class="next-line">
  I'm the next div element!
</div>

​

https://codepen.io/prashantkumarsahu/pen/WNZRXdB

Answer 1

当您在容器的样式中使用display: flex;，而容器没有拥有宽度时，容器的宽度将固定在子容器的宽度上。

如果您的容器有固定的宽度，并且您希望子容器增长并占用整个容器宽度，则应该在您的子样式中使用flex-grow:1;属性。

如果你想读更多关于flex-grow的文章，我建议你读developer.mozilla.org和css-tricks.com

这里是Codepen链接。

​

.container {
  display: flex;
  border: 5px solid blue;
  height: 200px;
  flex-wrap:wrap;
 }
  .div-1 {
    border: 5px solid red;
    width: 230px;
    flex-grow:1;
  }
  .div-2 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }

  .div-3 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
  .div-4 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
  .div-5 {
    border: 5px solid green;
    width: 200px;
    flex-grow:1;
  }
   .div-6 {
    border: 5px solid green;
    width: 200px;
     flex-grow:1;
  }
   .div-7 {
    border: 5px solid green;
    width: 400px;
  }
   .div-8 {
    border: 5px solid green;
    width: 400px;
  }

.next-line {
  height: 100px;
  border: 5px solid orange;
}

<div class="container">
  <div class="div-1">I'm 230 px wide</div>
  <div class="div-2">I'm take up what is left in the view port!</div>
  <div class="div-3"></div>
  <div class="div-4"></div>
  <div class="div-5"></div>
    <div class="div-6"></div>
    <div class="div-7"></div>
    <div class="div-8"></div>
</div>

​

Answer 2

修改.container css

.container {
  display: flex;
  /* width: fit-content; */
  ...

因此div-1扩展了容器的宽度。