Awkward Spacing Between 2 Column List Items

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 spaci

Solution 1:

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>

Solution 2:

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