2列列表项之间的尴尬间距 [英] Awkward spacing between 2 column list items

问题描述

我使用flex-box在两列布局中列出了成分列表.当一种成分足够长而导致文本中断到第二行时，它将导致相邻列中的列表项之间的垂直间距笨拙.在使用flex-box之前，我曾尝试使用内联块使列表项浮动，然后将它们浮动.

I have a list of ingredients in a two-column layout, using flex-box. When an ingredient is long enough to cause the text to break to a second line, it causes awkward vertical spacing between the list items in the adjacent column. Before using flex-box, I tried using making the list items inline-blocks and floated them.

这是我的网站上的样子:

Here's what it looks like on my website:

这是我的代码:

.field-items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.field-item {
  width: 50%;
  float: left;
}

<div class="field-items">
  <div class="field-item even">
    8 ounces sugar snap peas, stringed </div>
  <div class="field-item odd">
    12 grape tomatoes, halved </div>
  <div class="field-item even">2 tablespoons sliced almonds</div>
  <div class="field-item odd">2 tablespoons extra-virgin olive, walnut, or almond oil</div>
  <div class="field-item even">
    2 tablespoons fruity vinegar, such as raspberry or pomegranate </div>
  <div class="field-item odd">
    ¼ teaspoon salt </div>
  <div class="field-item even">
    1/8 teaspoon freshly ground pepper </div>
  <div class="field-item odd">
    4 cups packed mixed baby lettuce </div>
  <div class="field-item even">
    ¼ cup snipped fresh chives (½-inch pieces) </div>
  <div class="field-item odd">
    ¼ cup chopped fresh tarragon </div>
</div>

查看实际运行情况: https://jsfiddle.net/4t4pd3tt/2/

我的目标是在所有列表元素之间保持均匀的间距.我确定这个问题之前已经回答过，但是在最初的搜索中找不到我想要的东西.

My goal is to have even spacing between all of the list elements. I'm sure this question has already been answered before, but I wasn't able to find what I was looking for in my initial search.

推荐答案

要使用Flexbox进行此工作，除其他外，您还需要使用flex-direction: column并为flex容器提供固定的高度.

To make that work using Flexbox, you need amongst other, to use flex-direction: column and give the flex container a fixed height.

相反，对于列布局，CSS Columns是正确的方法.

Instead, for column layouts, CSS Columns is the proper way.

堆栈片段

.field-items {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

.field-item {
}

<div class="field-items">
  <div class="field-item">
    8 ounces sugar snap peas, stringed </div>
  <div class="field-item">
    12 grape tomatoes, halved </div>
  <div class="field-item">2 tablespoons sliced almonds</div>
  <div class="field-item">2 tablespoons extra-virgin olive, walnut, or almond oil</div>
  <div class="field-item">
    2 tablespoons fruity vinegar, such as raspberry or pomegranate </div>
  <div class="field-item">
    ¼ teaspoon salt </div>
  <div class="field-item">
    1/8 teaspoon freshly ground pepper </div>
  <div class="field-item">
    4 cups packed mixed baby lettuce </div>
  <div class="field-item">
    ¼ cup snipped fresh chives (½-inch pieces) </div>
  <div class="field-item">
    ¼ cup chopped fresh tarragon </div>
</div>

这篇关于2列列表项之间的尴尬间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！