DESIGN

Flexbox(フレックスボックス)の核を知って、頭の中を整理しよう!

Flexbox(フレックスボックス)の核を知って、頭の中を整理しよう!

Flexbox(フレックスボックス)とは?

Flexboxは、WEBデザインの技法の一つです。

イメージ的には、「今まで長々と書いていた配置するためのコードをもっと簡単に書けるようにしようよ」という感じです。

本記事では、Flexboxの核の部分に加えて、例を交えながら、使い方をご紹介していきます。

ぜひ参考にしてみてください、

Flexbox(フレックスボックス)を理解するために必要な前提知識

Flexboxで必要な知識は大きく3つです。

  1. flexboxで使う用語の理解
  2. 親要素に使えるプロパティの理解
  3. 子要素に使えるプロパティの理解

この3つについて、詳しくみていきます。

Flexboxで使う用語について

Flexboxでよく使う用語は、大きく4つあります。

  1. main axis… 主軸
  2. cross axis… 交差軸
  3. デフォルト軸… はじめから設定されている軸(=横軸)
  4. ラッピング… 縦横のレイアウトが崩れてしまうこと

ここでの一番のポイントは、「主軸」によって要素が並べられるということです。

親要素によく使うプロパティの理解

親要素でよく使うプロパティの核となるキーワードは「軸」と「配置」です。

そして、「軸」に関しては大きく下記の2つあります。

  1. display
  2. flex-direction
  3. flex-wrap

【display】の使い方

flex-direction】の使い方

flex-wrap】の使いかた

また、「配置」に関しては3つのプロパティがあります。

  1. align-content
  2. align-items
  3. justify-content

justify-content】の使い方

この中でも、絶対に使うのがdisplayです。

理由はシンプルで、これを使うことで「今からflexbox使いますよ」って宣言することになるからです。

子要素によく使うプロパティ

子要素でよく使うプロパティの核となるキーワードは、「伸縮」「配置」「順番」の3つです。

まず、「伸縮」については大きく4つのプロパティがあります。

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex

flex】の使い方

また、「順番」に関しても「order」を押さえていれば問題ありません。

order】の使い方

「配置」に関してもいくつかありますが、よく使うプロパティは「align-self」なので、これだけを覚えていれば十分です。

本記事は以上となります!ぜひ参考にしてみてください!