Flexbox等於八個50％寬度的列無法正確顯示

Question

我正在嘗試使用Flexbox製作等高度爲50％的寬度列。我有這個....

.items { 
 
     display: flex; 
 
     flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    padding: 10px; 
 
    width:50%; 
 
     margin: 10px; 
 
     background: aqua; 
 
       
 
}

<div class="items"> 
 
    <div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. Nullam commodo, magna sit amet sdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
</div>

它僅僅是在一列中顯示，我究竟做錯了什麼？

Answer 1

，因爲你使用padding和margin，項目的寬度等於50％+補白+利潤，

作爲一種變通方法，您可以設置安全min-width，並設置flex-grow: 1;

箱尺寸可以復位在最小寬度計算中包含填充。

.items { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    min-width: 40%; 
 
    padding: 10px; 
 
    flex: 1; 
 
    margin: 10px; 
 
    background: aqua; 
 
}

<div class="items"> 
 
    <div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam 
 
    at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. 
 
    Nullam commodo, magna sit amet sdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
</div>

Answer 2

當你有padding和margin，把它添加到您的.item的width: 50%，以彌補填充你應該添加box-sizing: border-box，並賠償邊距你可以用.item內容多了一個DIV 。

.items { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    padding: 10px; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 

 
.item > div { 
 
    padding: 10px; 
 
    background: aqua; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="items"> 
 
    <div class="item"> 
 
    <div>llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam 
 
     at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div>Item 1sadasdasdasdasd</div> 
 

 
    </div> 
 
    <div class="item"> 
 
    <div>Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. 
 
     Nullam commodo, magna sit amet sdasd</div> 
 

 
    </div> 
 
    <div class="item"> 
 
    <div> Item 1sadasdasdasdasd</div> 
 

 
    </div> 
 
</div>

Answer 3

發生了什麼事是，框的寬度設置爲50％，但不包括填充或保證金。您可以通過設置box-sizing: border-box;使50％包含填充，但不能包含邊距。解決此問題的一種方法是使用flex-grow屬性，該屬性告訴元素它可以增長多少以填充行中的空白空間（相對於行中的其他元素。如果所有元素都具有flex-grow: 1;，則它們將全部增長相同的量） 。

.items { 
 
     display: flex; 
 
     flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    flex-grow: 1; 
 
    width: 40%; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    background: aqua; 
 
       
 
}

<div class="items"> 
 
    <div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. Nullam commodo, magna sit amet sdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
</div>