Gridレイアウトが登場してからは押されぎみではあるが、Flexboxなレイアウトはリストを横並び表示するのに便利である。横並びリストで使用するときは、ほぼflex-wrap:wrapとセットで使用する。そうしないと、子要素にwidthやflex-basisを設定しても折り返されずに縮小されて横並びになるからだ。
Flexboxでflex-wrap:wrapを指定しない場合、つまり折り返しなしflex-wrap:nowrap（初期値なのでわざわざ記述する必要はないが）はどのような時に使うのだろうか。いくつか例を挙げてみる。
横スクロールリスト
flex-wrap:nowrapで一番需要が高いのは横スクロールリストだろう。縦にスペースを取りたくない時に利用する。
親要素（場合によっては先祖要素）にoverflow-x:scrollを付与し、X軸（横方向）のスクロールにする。子要素にはflex: 0 0 <flex-basis>（一括設定：伸縮なし、初期の寸法）を付与する。
アイキャッチ（固定）+テキスト（可変）のリスト・1
子要素を横並びにする。アイキャッチ画像の幅にflex: 0 0 <flex-basis>を設定し、テキストの幅には特に指定しない。そうすると、テキスト幅はflex-shrinkの初期値1（縮小）によって可変になる。
flex-wrap:wrapでも問題ないが、その場合はアイキャッチとテキスト両方に幅を設置しなければならず、テキスト幅にはflex: 0 1 calc(100% - <gap + アイキャッチ幅>)といった面倒な記述が必要になる。
アイキャッチ（固定）+テキスト（可変）のリスト・2
これは実際の業務上で見つけたのだが、アイキャッチ（固定）+テキスト（可変）のリストを作る際に、画像とテキストをspanなどで囲まずそのまま画像＋テキストで並べた箇所があった。
<li class="list-item">
<a class="list-link" href="/path/">
<img class="list-image" src="/path/image.jpg" alt="イメージ" width="100" height="100">
テキスト
</a>
</li>.list-link {
display: flex;
flex-wrap: wrap;
}
.list-image {
width: 20%;
height: auto;
}こんな感じの、なかなか横着な作りをしていた（実際はもっと雑だったが）。Flexboxといえばflex-wrap:wrapとばかりにFlexコンテナに付与してある。アイキャッチ画像にはwidthが付与されていて幅が定まっているが、テキストの幅が制御できていない。
これで何が起こるかというと、テキストが長くなった時にカラム落ちが発生する、カラム落ちを避けるために<br>で改行して整える、という具合にひと手間かかる上にメンテナンス性が悪い。
Flexコンテナのflex-wrap:nowrapを削除し、.list-imageにflex: 0 0 <flex-basis>を付与すれば、テキストをわざわざ<br>で強制改行する必要はなくなる。
但し、テキストの行数は制御できないので、規定の行に収めたい場合は<span>タグなどで囲んでCSSで設定する必要がある。
/* テキスト要素 */
.list-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}