Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックのまとめ
Post on:2020年11月25日
sponsors
ページのレイアウトやUIコンポーネントなど、Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックを紹介します。
ヘッダやナビゲーション、フォーム、テーブルなど、実際のプロジェクトでよく使用されるテクニックです。
Master Flexbox in 12 Minutes with Most Common Use Cases
by Thu Nghiem
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 1. ブロック要素を水平に揃える
- 2. 要素を中央に配置する
- 3. 要素間にスペースを分配する
- 4. 要素を端にプッシュする
- 5. 相対的なサイズのカラムを構築する
- 6. メディアクエリがある場合とない場合のレスポンシブレイアウトを作成する
- 7. アイテムの順番を変更する
- 8. アイテムの位置を変更する
はじめに
多くのチュートリアルで問題となるのは、すべてを教えようとして、それをいつ、なぜ使うのかを教えることを忘れてしまうことです。このチュートリアルでは、実際のプロジェクトでよく使用されるFlexboxのテクニックを解説します。将来の多くのプロジェクトで役立つと思います。
8つのタスクをFlexboxで解決することで、Flexboxについての学習にもなります。
この記事で解説しているコードは、下記からダウンロードできます。
また、動画でも解説しています。
それでは、始めましょう！
1. ブロック要素を水平に揃える
親要素にdisplay: flex;を与えるだけです。
|
1 2 3 |
.container { display: flex; } |
これだけで、子のブロック要素すべてが横軸に配置されます。
ブロック要素を水平に揃える
2. 要素を中央に配置する
これは私がよく使用するFlexboxの使用例の1つです。
|
1 2 3 4 5 |
.container { display: flex; justify-content: center; align-items: center; } |
この3行のCSSで、要素が水平と垂直の両方向の中央に配置されます。
要素を中央に配置する
3. 要素間にスペースを分配する
これは、Flexboxのもう1つのよく使用する例です。
|
1 2 3 4 |
.container { display: flex; justify-content: space-between; } |
要素間に均等なスペースを配置します。
ナビゲーションのアイテムを配置する時に使用します。
要素間にスペースを分配する
4. 要素を端にプッシュする
ここでは、3つのオプションを解説します。
2つの要素がある場合は、justify-content: space-between;を使用します。これにより、最初の要素が左端にプッシュされ、最後の要素が右端にプッシュされます。
|
1 2 3 4 |
.container { display: flex; justify-content: space-between; } |
ロゴとボタンで構成されたヘッダでよく使用します。
2つの要素を左右の端にプッシュする
もちろん、ロゴとナビゲーションでもOKです。
2つの要素を左右の端にプッシュする
3つの要素がある場合は、flex-grow: 1;を要素間に追加するのが私のやり方です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="option-2"> <div class="container"> <div class="item sm"></div> <div class="item"></div> <div class="space"></div> <div class="item"></div> </div> </div> |
|
1 2 3 |
.option-2 .space { flex-grow: 1; } |
2つの要素が左端に、1つの要素が右端に配置されます。
3つの要素を左右の端にプッシュする
さきほどよりも少し複雑なヘッダ、ロゴとナビゲーションとボタンの3つの要素が配置されたヘッダで使用します。
3つの要素を左右の端にプッシュする
1つ目の要素にflex-grow: 1;を与えると、どうなるでしょう。
|
1 2 3 |
.option-3 .item:first-child { flex-grow: 1; } |
1つ目の要素を可能な限り広げます。
1つ目の要素を広げる
これはフォームの入力欄などで使用します。
1つ目の入力欄を広げる
5. 相対的なサイズのカラムを構築する
アイテムにflex値（flex: {number};）を与えるだけで、flex値を持つ他のアイテムと相対的にアイテムのスペースを制御することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.task-5 .item-1 { flex: 3; } .task-5 .item-2 { flex: 1; } .task-5 .item-3 { flex: 1; } .task-5 .item-4 { flex: 1; } |
これで、相対的なサイズのカラムを構築できます。
相対的なサイズのカラムを構築
これは、例えばテーブルレイアウトで役立ちます。
セルの幅を相対的なサイズにする
6. メディアクエリがある場合とない場合のレスポンシブレイアウトを作成する
まずは、簡単な使用例から。
|
1 2 3 4 |
.task-6 .container { display: flex; flex-wrap: wrap; } |
レスポンシブなレイアウトにすることで、アイテムがコンテナ内で縮小しようとしないようにします。
そして、2カラムレイアウトが可能になります。
|
1 2 3 |
.task-6 .item { flex-basis: 50%; } |
または、スクリーンが375pxより広い場合は4カラムレイアウトにします。
|
1 2 3 4 5 6 |
@media (min-width: 375px) { .task-6 .item { display: flex; flex-basis: 25%; } } |
7. アイテムの順番を変更する
これはあまり一般的ではありません。
orderを与えることで、順番を変えることができます。
|
1 2 3 |
.task-7 .item-1 { order: 1; } |
orderのデフォルト値は0で、マイナスにすることもできます。
8. アイテムの位置を変更する
これもあまり一般的ではありません。
Flex内のアイテムは、自分で位置を変えることができます。
|
1 |
align-self: auto | flex-start | flex-end | center | baseline | stretch; |
これでチュートリアルは、終了です。
YouTubeで完全なチュートリアルを確認できます。この記事があなたにとってFlexboxの理解と学習に役立つことを願っています。
sponsors
