html - Flexbox 等于八个 50% 宽度的列显示不正确

Question

<分区>

Answer 1

因为您使用了 padding 和 margin ，元素的宽度等于 50% + paddings + margins，

作为解决方法，您可以设置一个安全的 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>