はじめに
概要
今回は、実践でよく使用するFlexプロパティについて説明します。基本のことから応用まで詳しく掘り下げていきます。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
読者Flexプロパティの便利な活用方法は、最初にどこを理解するとよいですか？
木村どの要素を基準にするか、どの状態で見た目を変えるか、画面幅が変わっても崩れないかを順番に確認することが大切です。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
Flexのメリット
Flexのメリットでは、Flexプロパティの便利な活用方法を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
メリットを記述する上で、FlexとGridを比べてみました。 Flexbox（フレックスレイアウト）: FlexboxはCSS3の一部として導入されました。 初期のFlexboxの仕様は、現在のものとは異なっていましたが、時間とともに改善・安定してきました。 Flexboxは主に1次元のレイアウトのためのものです（縦か横のいずれか1方向）。 既に多くのブラウザでサポートされています。IE10以降でも、プレフィックス付きでのサポートがあります（ただし、古い仕様に基づいているため注意が必要）。 CSS Grid（グリッドレイアウト）: CSS Gridは、Flexboxより後に導入されました。 グリッドは2次元のレイアウトを目的としています（縦と横の両方向）。 最近のブラウザでは広くサポートされており、特に最新のブラウザでは非常に強力な機能を持っています。 ただし、古いブラウザでは完全にはサポートされていないか、部分的なサポートとなっています。 現在のメジャーなブラウザでは、両方のレイアウト技術が十分にサポートされています。それぞれの技術を選択する際には、ターゲットとするブラウザや実現したいデザイン、使用場面に応じて適切なものを選ぶとよいでしょう。Flexのメリットで押さえたいポイント
Flexのメリットは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
Flexのメリットの確認方法
スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。
Flexの活用
Flexの活用では、Flexプロパティの便利な活用方法を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
優先して覚えたいプロパティ
justify-content: このプロパティは、フレックスコンテナ内のアイテムを主軸（flex-direction で定義された方向）に沿ってどのように配置するかを定義します。 取り得る値には、flex-start, flex-end, center, space-between, space-around, space-evenly などがあります。 align-items: このプロパティは、フレックスコンテナ内のアイテムを交差軸（flex-direction の逆方向）に沿ってどのように配置するかを定義します。 取り得る値には、flex-start, flex-end, center, baseline, stretch などがあります。 flex-direction: このプロパティは、フレックスコンテナ内の主軸の方向を定義します。 row の値は、アイテムをテキストの方向と同じ方向（通常、左から右へ）に配置します。これがデフォルトの値です。 他の取り得る値には、row-reverse, column, column-reverse などがあります。要素を中央に寄せる
HTML<div class="flex-container">
<div class="flex-item">中央に配置される要素</div>
</div>.flex-container {
display: flex;
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
height: 100vh; /* ビューポートの高さを100%に設定して、要素を垂直方向に中央に配置するための背景として機能させます */
}
.flex-item {
/* 必要に応じてスタイルを追加 */
}rowとcolumnについて
1. flex-direction: row（デフォルト） この場合、アイテムは水平方向に配置されます。 HTML<div class="flex-row-container">
<div>アイテム 1</div>
<div>アイテム 2</div>
<div>アイテム 3</div>
</div>.flex-row-container {
display: flex;
flex-direction: row; /* 実際には、これがデフォルトなので指定しなくてもよい */
}<div class="flex-column-container">
<div>アイテム 1</div>
<div>アイテム 2</div>
<div>アイテム 3</div>
</div>.flex-column-container {
display: flex;
flex-direction: column;
}orderプロパティ
orderプロパティでは、Flexプロパティの便利な活用方法を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
order は、フレックスボックス内のアイテムの表示順序を制御するためのプロパティです。このプロパティを使用すると、ソースコードの順序とは異なる順序でアイテムを表示することができます。 HTML<body>
<div id="global-container">
<div id="container">
<header></header>
<div class="hero"></div><!-- /.hero -->
<main>
<div id="main-container">
<div class="content-order">
<div class="content-order__inner wrap py-[50px] flex flex-col gap-10">
<div class="content__box flex flex-col items-center justify-between md:flex-row order-2">
<div class="content-order__img md:w-[45%]">
<img src="https://picsum.photos/1000/500?random=3" alt="">
</div><!-- /.content-order__img -->
<div class="content__txt md:w-[45%]">
<p class="">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div><!-- /.content__txt -->
</div><!-- /.content__box -->
<div class="content__box flex flex-col items-center justify-between md:flex-row">
<div class="content-order__img md:w-[45%]">
<img src="https://picsum.photos/1000/500?random=3" alt="">
</div><!-- /.content-order__img -->
<div class="content__txt md:w-[45%]">
<p class="">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div><!-- /.content__txt -->
</div><!-- /.content__box -->
</div><!-- /.content-order__inner -->
</div><!-- /.content-order -->
</div>
</main>
<footer></footer>
</div>
</div>
</body>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
<div class="content-order__img md:w-[45%] order-2"<img decoding="async" src="https://picsum.photos/1000/500?random=3" alt=""></div>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
orderプロパティで押さえたいポイント
orderプロパティは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
orderプロパティの確認方法
スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。
align-items: stretchについて
align-items: stretchについてでは、Flexプロパティの便利な活用方法を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
align-itemsのデフォルトと値です。Flexboxのプロパティの一つで、フレックスアイテムの交差軸（cross axis）上での配置を制御します。stretch はその中の一つの値で、この値が指定された場合、フレックスアイテムはフレックスコンテナの高さ（または幅、flex-directionがcolumnの場合）に合わせて伸び縮みします。align-items: stretchについてで押さえたいポイント
align-items: stretchについては、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
align-items: stretchについての確認方法
スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。
まとめ
- 上記は優先して理解したいプロパティである
- Webサイトのデザインの形成に必要不可欠である
- ブラウザのサポートが安定している
- 要素の中央寄せは、親要素に明示的にheightを指定する
- 要素の順番の入れ替えが容易に行える
flex-grow、shrink、basisをまとめて確認できて助かりました。カード幅を均等にしたい場合は、まずflex: 1 1 0を試す考え方でよいでしょうか？
はい、均等幅のカードではflex: 1 1 0を最初に試す考え方で問題ありません。長い文字で幅が押し広げられる場合はmin-width: 0も指定し、必要に応じてflex-wrapや最小幅を調整してください。