Question

我正在尝试使用Flexbox制作高度相等的50％宽度列。我有这个....

＆＃13;

.items {
      display: flex;
      flex-wrap: wrap;
}

.item {
  padding: 10px;
  width:50%;
        margin: 10px;
        background: aqua;
             
}

＆＃13;

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

＆＃13;

它只是在一栏中显示，我做错了什么？

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

发生的事情是框的宽度设置为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>

Answer 3

正如您padding和margin一样，它会添加到您width: 50%的{{1}}，以补偿您应添加.item的填充，并进行补偿您可以将box-sizing: border-box内容包装到另一个div。

＆＃13;

.item

＆＃13;

.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;
}

＆＃13;

Flexbox等于八个50％宽度的列无法正确显示

3 个答案: