如何將Flex容器的寬度固定為等于flex專案的寬度？[復制]

.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-container 的寬度設定為等于 flex-items 的寬度，以便最后沒有剩余的空白空間..

附代碼供參考。在這里，我想將容器的寬度固定為等于前 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

uj5u.com熱心網友回復：

當你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>

uj5u.com熱心網友回復：

修改 .container css

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

這樣 div-1 就會拉伸容器的寬度。

標籤：css 弹性盒

上一篇：如何更改HTML中表格行的高度？

下一篇：如何僅勾勒元素的可見部分？