CSS: flexコンテナでは常に`flex-wrap: wrap`を指定しよう（翻訳）

CSS: flexコンテナでは常にflex-wrap: wrapを指定しよう（翻訳）

今朝、私のsqlite.directoryサイトに若干の改良を加えたのですが、UIのモバイル向けレスポンシブデザインにいろいろ修正が必要であることに気づきました。そこで、この機会にレスポンシブデザインを行うときに私が見出したよくある便利技とヒントをいくつかまとめておきたいと思います。1つ目の便利技は、最近私が多用しているものを紹介したいと思います。

私はflexコンテナを多用していて、心から気に入っています。しかし、同じレスポンシブな要素を何かと見落としがちであることに気づきました。flexの折り返しを適切に処理できていなかったのです。
私のsqlite.directoryサイトで実際に使っているヘッダーを見てみましょう。

See the Pen
responsive design tip: flex-wrap (before) by Stephen Margheim (@smargh)
on CodePen.

ご覧の通り、画面を小さくするとWebサイトのタイトルロゴとユーザー情報の境目で折り返さずに並んでしまい、見苦しくなっています。そこで、このコミットで以下のように2箇所を変更して修正しました。

-<header class="w-full max-w-6xl mx-auto py-4 mb-4 text-lg flex justify-between items-center border-b"> 
-  <h2 class="flex items-center gap-2">
+<header class="w-full max-w-6xl mx-auto py-4 mb-4 text-lg flex justify-between items-center flex-wrap gap-y-2 border-b"> 
+  <h2 class="flex items-center gap-2 whitespace-nowrap">
    <%= link_to root_path, class: "group" do %>
      <%= image_tag "/icon.svg", class: "inline-block" %>
      <code class="">
        <span class="text-blue-500 group-hover:underline decoration-blue-500">sqlite</span>
        <span class="inline-block group-hover:animate-bouncing -mx-3">.</span>
        <span class="text-black group-hover:underline decoration-black">directory</span>
      </code>
    <% end %>
  </h2>

-  <div class="inline-flex items-center gap-2"> 
+  <div class="ml-auto inline-flex items-center gap-2"> 

修正後の結果は一目瞭然です。

See the Pen
responsive design tip: flex-wrap (after) by Stephen Margheim (@smargh)
on CodePen.

変更内容を詳しく見てみましょう。

1. <header> flexコンテナにflex-wrap gap-y-2を追加
2. Webサイトのタイトルロゴを囲んでいる<h2>にwhitespace-nowrapを追加
3. ユーザー情報を囲んでいる<div>にml-autoを追加

重要なのは第1の変更です。flexコンテナにflex-wrapを追加したことで、コンテナが小さすぎる場合に子要素を次の行に折り返すようになります。ささやかな変更ですが、UIのレスポンシブな振る舞いを大きく変えることが可能です。

第2の変更では、折り返しをエレガントに処理しています。タイトルロゴのテキストにwhitespace-nowrapを指定したことで、テキストが要素内で折り返されなくなります。

第3の変更では、ml-auto（margin-left: auto;）でユーザー情報を常に右側に表示するようにしています。

これらを組み合わせることで、モバイル体験がさらに快適になります。私にとって役に立ったのと同じぐらい皆さんにとってもお役に立てば幸いです。Happy coding!

関連記事

CSS: 2025年に押さえておきたい最新CSS機能13選（翻訳）

2025年のファビコンを極める: 必要なファイルはほぼ3つに減った！（翻訳）