2列列表项之间的尴尬间距

Question

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:

Here's what my code looks like:

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

See it in action: 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.

Answer 1

I've been in a similar position where I tried to do this with flex . I spent a long, long time on it and eventually found out that there is no nice way of doing it. My suggestion would be to go back to the trusty (read: awkward and annoying) float .

You just need to clean up your CSS a little and you can float the odd elements to the left and the even elements to the right (or the other way, if you so wish, but that would be kinda stupid, so I wouldn't advise doing that.

.field-item {
  width: 50%;
}

.field-item.odd {
  float: left;
}

.field-item.even {
  float: right;
}

For this, you can remove all the rules from .field-items in your CSS.

An obvious issue here is that you need to continue to add odd and even classes to the div tags, which could easily cause a bug if you do it wrong.

I hope this helps!

EDIT

As Jonathan Nicol pointed out, you can also use nth-child(odd|even) to achieve the same thing, without the need for specific classes (rendering my note above redundant.

.field-item {
  width: 50%;
}

.field-item:nth-child(odd) {
  float: left;
}

.field-item:nth-child(even) {
  float: right;
}

Answer 2

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

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

Stack snippet

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