3
ナビゲーションセクションでは、space-betweenの正当な理由を使用します。ナビゲーションがラップしなければならないより小さいディスプレイでは、アイテムが自分の中心に来るようにしたいと思います。フレックスボックスの間のスペースにラップされたアイテムを中心に
nav {
display: flex;
width: 100%;
flex-flow: row wrap;
justify-content: space-between;
}<nav>
<div class='item'>
Item 1 is alone on its row if the window is small, but is not centered.
</div>
<div class='item'>
Item 2 is very much like item 1.
</div>
</nav>Codepenのデモは：https://codepen.io/anon/pen/MmdOMP?editors=1100#0
これを達成するには、メディアクエリが必要です。 https://codepen.io/anon/pen/dWEJqW – LGSon
私はそれを考え、場合によっては実行可能な解決策ですが、これはHexo（静的サイト生成プログラム）のテーマです。ユーザーは、モバイル上の1つの行に収まるように、またはデスクトップ上の1つの行に収まらない程度に小さい1つのnavを持つことができます。 – Jakob
ここでの主な問題は、フレックスボックスのコンテナ/アイテムは、ラインを破るタイミングを知らないため、それに基づいて動作を変更できないことです。メディアクエリでそれができない場合は、ウィンドウのサイズ変更イベントでスクリプトを実行し、手動で2行に分割されているかどうかを確認する必要があります – LGSon