CSS Flexboxを使ってレイアウトの基礎を学習しよう

CSS Flexboxを使ってレイアウトの基礎を学習しよう CSS

FlexboxはCSSの強力なレイアウト機能で、簡単にコンテンツを配置、調整、整列できます。今回は、Flexboxの基本的な使い方を学習しましょう。

Flexboxの基本的な書き方

Flexboxを使うには、まず親要素にdisplay: flex;を指定します。

.container {
  display: flex;
}

flex-direction … 子要素の並ぶ向き

flex-directionプロパティは、子要素の並び方向を指定します。

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}
詳細
row子要素が横方向に並ぶ
row-reverse子要素が横方向に逆順で並ぶ
column子要素が縦方向に並ぶ
column-reverse子要素が縦方向に逆順で並ぶ

flex-wrap … 子要素の折り返し

flex-wrapプロパティは、子要素が折り返すかどうかを指定します。

.container {
  display: flex;
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
}
詳細
nowrap子要素が折り返さずに1行に並ぶ
wrap子要素がコンテナ幅を超えると折り返して並ぶ
wrap-reverse子要素がコンテナ幅を超えると逆順で折り返して並ぶ

flex-flow … flex-directionとflex-wrapをまとめて指定

flex-flowプロパティは、flex-directionflex-wrapを一度に指定できます。

.container {
  display: flex;
  flex-flow: row nowrap; /* flex-directionとflex-wrapの値をスペース区切りで指定 */
}

justify-content … 水平方向の揃え

justify-contentプロパティは、子要素を水平方向に揃える方法を指定します。

.container {
  display: flex;
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}
詳細
flex-start子要素が左端に揃う
flex-end子要素が右端に揃う
center子要素が水平方向に中央に揃う
space-between子要素間のスペースが均等になるように揃う
space-around子要素を囲むスペースが均等になるように揃う
space-evenly子要素間と周囲のスペースが均等になるように揃う

align-items … 垂直方向の揃え

align-itemsプロパティは、子要素を垂直方向に揃える方法を指定します。

.container {
  display: flex;
  align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
}
詳細
stretch子要素がコンテナの高さに合わせて伸縮する
flex-start子要素が上端に揃う
flex-end子要素が下端に揃う
center子要素が垂直方向に中央に揃う
baseline子要素がベースラインに揃う

align-content … 複数行にした時の揃え

align-contentプロパティは、複数行の子要素をどのように揃えるか指定します。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch; /* stretch | flex-start | flex-end | center | space-between | space-around */
}
詳細
stretch複数行の子要素がコンテナの高さに合わせて伸縮する
flex-start複数行の子要素が上端に揃う
flex-end複数行の子要素が下端に揃う
center複数行の子要素が垂直方向に中央に揃う
space-between複数行の子要素間のスペースが均等になるように揃う
space-around複数行の子要素を囲むスペースが均等になるように揃う

order … 順序の指定

orderプロパティは、子要素の表示順序を指定します。

.item {
  order: 0; /* 整数で指定 */
}

flex-grow … 子要素の伸びる比率

flex-growプロパティは、子要素の伸びる比率を指定します。

.item {
  flex-grow: 0; /* 数値で指定 */
}

flex-shrink … 子要素の縮む比率

flex-shrinkプロパティは、子要素の縮む比率を指定します。

.item {
  flex-shrink: 1; /* 数値で指定 */
}

flex-basis … 子要素のベースとなる幅の指定

flex-basisプロパティは、子要素のベースとなる幅を指定します。

.item {
  flex-basis: auto; /* auto | サイズ単位で指定 (px, %, em, rem など) */
}
詳細
auto子要素のベースとなる幅を自動的に計算する
サイズ単位子要素のベースとなる幅を指定する(px, %, em, rem など)

align-self … 子要素の垂直方向の揃え

align-selfプロパティは、個別の子要素の垂直方向の揃え方を指定します。これは、親要素のalign-itemsプロパティを上書きします。

.item {
  align-self: auto; /* auto | flex-start | flex-end | center | baseline | stretch */
}
詳細
auto親要素のalign-itemsプロパティを継承する
flex-start子要素が上端に揃う
flex-end子要素が下端に揃う
center子要素が垂直方向に中央に揃う
baseline子要素がベースラインに揃う
stretch子要素がコンテナの高さに合わせて伸縮する

これで、CSS Flexboxを使ったレイアウトの基本的な使い方を学ぶことができました。これらのプロパティを組み合わせることで、様々なレイアウトを効率的に実現できます。練習を重ねて、Flexboxを使いこなしましょう!

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

CSS
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました