【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

CSSでレイアウトを作成するとき、display: flex;を使うことで要素を横並びにできます。あなたも以下のような横並びレイアウトを作りたいと思ったことはありませんか？

• 要素を両端に揃え、余白を均等に配置する
• 親要素の幅からはみ出した要素を折り返す
• 画像とテキストを交互に配置する

このようなレイアウトを作成するなら、Flexboxを活用するのがおすすめです。

この記事ではFlexboxの基本から実際の使用例まで、実践的に解説していきます。ぜひ学習にお役立てください。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

Flexboxとは

Flexboxとは、「要素の配置」を短いコードで、かつ柔軟に行うことを可能にしたレイアウトモジュールです。「要素の配置」とは例えば、以下のような実装です。

上記のようなケースでも、簡単なコードで指定できるのが「Flexbox」です。Flexboxを用いることで、レイアウト作成の作業効率を飛躍的に向上させることができます。

Flexboxの性質

Flexアイテムは以下のような性質を持ちます。

• 横並びで表示される
• 親要素に合わせて横幅・高さが伸縮する
• HTMLの記述が表示順に影響しない

これらの性質を、CSSの記述によって柔軟に変更できることがFlexboxの特徴です。

Flexboxの性質を活かせば、コードの記述量を減らしたり、レスポンシブレイアウトの作成を効率よく行ったりすることができます。Flexboxは、CSSでのレイアウト作成に欠かせない知識です。

Flexboxの使い方

flexboxを使用するには、親要素にdisplay: flex;を指定します。こうすることで、子要素が横並びになります。

<ul class="flexbox">
 <li class="flex-item">要素１</li>
 <li class="flex-item">要素２</li>
 <li class="flex-item">要素３</li>
</ul>

.flex-item {
 list-style: none;
 background: #ffbb1e;
 color: #fff;
 padding: 10px;
 margin: 10px;
}

このとき親要素のことをflexコンテナ、子要素のことをflexアイテムといいます。

Flexboxの見本

Flexboxは、ZeroPlusのサービスサイトでもたくさん使用されています。実際に見てみましょう。

画像の色枠部分に注目してください。

• 複数の要素が横並びになっている
• 横並びになっている要素の両端が揃っている
• 親要素からはみ出た要素がきれいに折り返されている

これら全てが、Flexbox のプロパティで指定できるものです。

Flexboxに関するプロパティには2つの種類があります。

• Flexコンテナに指定するプロパティ
• Flexアイテムに指定するプロパティ

それぞれ確認していきましょう。

flexコンテナ（親要素）に指定するプロパティ

flexコンテナに指定するプロパティは以下のとおりです。

「flex-direction」flexアイテムの並び方（横並び・縦並び）

flex-directionは、flexアイテムの並び方を指定するプロパティです。値とそれぞれの効果は以下のとおりです。

実際の出力結果を確認してみましょう。

See the Pen flex-direction by ZeroPlus (@zeroplus-programming) on CodePen.

flex-directionのより詳しい使い方は以下の記事で解説しています。

【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

「flex-wrap」flexアイテムの折り返し

flex-wrapはflexアイテムの折り返しを指定するプロパティです。

flex-wrapの値とそれぞれの効果は以下の通りです。

実際の出力結果を確認してみましょう。

See the Pen flex-wrap by ZeroPlus (@zeroplus-programming) on CodePen.

flex-wrapのより詳しい使い方は以下の記事で解説しています。

【CSS】flexアイテムの折り返し！flex-wrapの使い方を解説

「flex-flow」flexアイテムが並ぶ向きと折り返し

flex-flowはflexアイテムの並び方と折り返しを指定するプロパティです。

flex-flowに指定できる値はflex-directionとflex-wrapで指定できる値と同じものです。

flex-flow: flex-directionの値 flex-wrapの値;と、それぞれの値を並べてショートハンドで指定します。指定できる値とそれぞれの効果は以下の通りです。

See the Pen flex-flow by ZeroPlus (@zeroplus-programming) on CodePen.

flex-flowのより詳しい使い方は以下の記事で解説しています。

【CSS】flexアイテムの折り返しと方向を同時に指定！flex-flowの使い方とレイアウトサンプル

「justify-content」flexアイテム同士の水平方向の間隔

justify-contentはflexアイテムの横方向の配置を指定するプロパティです。

justify-contentの値とそれぞれの効果は以下の通りです。

実際の出力結果を確認してみましょう。

See the Pen justify-contenrt by ZeroPlus (@zeroplus-programming) on CodePen.

justify-contentのより詳しい使い方は以下の記事で解説しています。

【CSS】justify-contentの使い方や効かない原因を解説

「align-items」flexアイテムの位置の指定

align-itemsはflexアイテムの高さを揃えるプロパティです。

align-itemsの値とそれぞれの効果は以下の通りです。

実際の出力結果を確認してみましょう。

See the Pen align-items by ZeroPlus (@zeroplus-programming) on CodePen.

align-itemsのより詳しい使い方は以下の記事で解説しています。

【CSS】align-itemsの使い方を解説！flexアイテムの高さを揃える方法

「align-content」flexアイテムの垂直方向の間隔

align-contentはflexアイテムの縦方向の配置を指定するプロパティです。

align-contentの値とそれぞれの効果は以下の通りです。

実際の出力結果を確認してみましょう。

See the Pen align-content by ZeroPlus (@zeroplus-programming) on CodePen.

align-contentのより詳しい使い方は以下の記事で解説しています。

【CSS】align-contentの使い方！flexアイテムの配置や余白を指定する方法

flexアイテムに指定するプロパティ

flexアイテムに指定するプロパティは以下のとおりです。

「order」flexアイテムを個別に指定

orderはflexアイテムの表示順を指定するプロパティです。

orderには数値を指定します。初期値は0で、マイナスの値も指定可能です。

すべてのflexアイテムにorderを指定した場合

要素の表示順はorderの数値が小さいものからとなります。

一部のflexアイテムにorderを指定した場合

要素の表示順は以下のとおりです。

1. orderの値がマイナスのflexアイテム
2. orderの指定がない（orderの値が0の）flexアイテム
3. orderの値がプラスのflexアイテム

See the Pen order by ZeroPlus (@zeroplus-programming) on CodePen.

orderのより詳しい使い方はこちらの記事で解説しています。

【CSS】orderでflexアイテムを並び替える方法を解説

「flex-grow」flexアイテムの伸び率

flex-growはflexアイテムの伸び率を指定するプロパティです。flex-growには数値を指定します。

.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}
.item3 {
  flex-grow: 3;
}

プロパティ値は数値を指定しますが、マイナスの値は指定できません。

実際の出力結果を見てみましょう。

See the Pen flex-grow by ZeroPlus (@zeroplus-programming) on CodePen.

flex-growのより詳しい使い方は以下の記事で解説しています。

【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説

「flex-shrink」flexアイテムの縮み率

flex-shrinkは親要素にスペースの余りがない場合に、指定の子要素の収縮率を指定します。

.item1 {
  flex-shrink: 2;
}
.item2 {
  flex-shrink: 3;
}
.item3 {
  flex-shrink: 4;
}

プロパティ値は数値を指定しますが、マイナスの値は指定できません。初期値は1です。

flex-shrinkのより詳しい使い方はこちらの記事で解説しています。

【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

「flex-basis」flexアイテムの基準の大きさ

flex-basisはflexアイテムの基準の大きさを指定します。以下の値を指定します。

• auto（初期値）：flexアイテムの横幅を自動的に広げる
• 数値 + 単位 ：flexアイテムの横幅を、数値とpxやrem、emなどの単位で指定する
• 数値 + % ：flexアイテムの横幅を%比率で指定する

flex-basisとwidthは基本的に同じですが、併用した場合にはflex-basisが優先されます。またflex-directionによってflexアイテムが縦並びになっているとき、flex-basisはheightの値をとります。

.item1{
  flex-basis: auto;
}
.item2{
  flex-basis: 30px;
}
.item3{
  flex-basis: 50%;
}

flex-basisのより詳しい使い方はこちらの記事で解説しています。

【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

「flex」ショートハンド

flexはflexアイテムの基準の大きさと伸縮率を指定するプロパティです。
flex-grow、flex-shrink、flex-basisをショートハンドで指定できます。
flexプロパティの効果は、記述する値の数や単位の有無によって変化します。

また特定の数値のときのみ、以下の指定も可能です。

「align-self」flexアイテムの配置の指定

align-selfはflexアイテム個々の縦の配置を指定するプロパティです。

align-selfの値とそれぞれの効果は以下のとおりです。

実際の出力結果を確認してみましょう。

See the Pen align-self by ZeroPlus (@zeroplus-programming) on CodePen.

「gap」flexアイテムの余白

gapはFlexアイテム同士の余白を指定するプロパティです。gapにはrow-gapとcolumn-gapという2つの種類があり、それぞれ縦方向と横方向に並んでいる子要素同士の余白が指定できます。

.flexbox {
  row-gap: 40px;
  column-gap: 40px;
}

row-gapとcolumn-gapの使い分けは以下のようになっています。

• row-gap：縦方向の余白
• column-gap：横方向の余白

一括指定をするときは、次のようにショートハンドで指定します。

/* row-gapとcolumn-gapを異なる値で指定するとき */
.flexbox {
  gap: 32px 80px;
}

/* row-gapとcolumn-gapを同じ値で指定するとき */
.flexbox {
  gap: 80px;
}

関連記事

flexbox以外に、grid というレイアウトモードがあります。gridはflexboxよりも難易度が高いですが、flexboxでは実装できないレイアウトを作成できることが特徴です。

grid については、こちらの記事で詳しく解説しております。「もっとレイアウト作成を効率よくしたい！」という方にピッタリの内容ですので、ぜひ学習にお役立てください。

CSS Gridの使い方を丁寧に解説！爆速でレイアウトを完結させよう！

Flexboxの応用

flexアイテムが並ぶ方向の指定や均等な配置、折り返しなどは基礎的な技術です。Flexboxを応用できれば、さらにレイアウトの幅が広がります。

この項目では、Flexboxの応用で特によく使われるレイアウトの作り方を解説します。

上下左右中央寄せ

上下左右の中央寄せは、justify-content: center;とalign-items: center;を同時に指定することで可能です。

<ul class="flexbox">
  <li class="flex-item">要素１</li>
  <li class="flex-item">要素２</li>
  <li class="flex-item">要素３</li>
</ul>

.flexbox {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.flex-item {
  list-style: none;
  background: #ffbb1e;
  color: #fff;
  border: 1px solid #000;
  padding: 50px;
  margin: 0 20px;
}

また、display: flex;は横並びのときだけでなく、ひとつの要素に対してのみ使う場合もあります。例えば、背景画像の中央にテキストを表示する場合です。

<div class="bg">
  <p class="bg-copy">ZeroPlus Media</p>
</div>

.bg{
  height: 100vh;
  background: url(../img/草原の写真.jpg) center 0 / cover;
  display: flex;
}

.bg-copy{
  font-size: 70px;
  font-weight: bold;
  color: #ffbb1e;
  margin: auto;
}

親要素にdisplay: flex;が指定されていると、子要素にmargin: auto;を適用できるようになります。この性質を利用して、テキストを画像の中央に配置できます。

カード型レイアウト

記事のカードリンクに使われることが多い実装です。画像、テキスト、ボタンで作られたカードを横並びにしています。

<ul class="flexbox">
  <li class="flex-item">
    <a href="#">
      <img src="img/草原の写真.jpg" alt="">
      <div class="flex-content">
        <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <div class="flex-btn">続きを読む</div>
      </div>
    </a>
  </li>
  <li class="flex-item">
    <a href="#">
      <img src="img/草原の写真.jpg" alt="">
      <div class="flex-content">
        <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <div class="flex-btn">続きを読む</div>
      </div>
    </a>
  </li>

  <li class="flex-item">
    <a href="#">
      <img src="img/草原の写真.jpg" alt="">
      <div class="flex-content">
        <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <div class="flex-btn">続きを読む</div>
      </div>
    </a>
  </li>
</ul>

.flexbox {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  align-items: center;
}

.flex-content {
  padding: 20px;
}

.flex-item {
  width: 25%;
  list-style: none;
  background: rgba(180, 179, 179, 0.204);
  margin: 0 50px;
  text-align: center;
}

.flex-text {
  text-align: left;
  padding-bottom: 40px;
}

.flex-btn {
  color: #fff;
  background: #ffbb1e;
  padding: 5px;
  margin: 0 30%;
  border-radius: 5px;
}

画像とテキストを交互に配置する

画像とテキストを左右交互に配置するレイアウトもよく見るレイアウトです。:nth-childの偶数・奇数の指定を使用します。

 <div class="flexbox">
   <img class="flex-img" src="img/草原の写真.jpg" alt="" class="flex-img">
   <div class="flex-item">
     <h2 class="flex-title">タイトル</h2>
     <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
   </div>
 </div>

 <div class="flexbox">
   <img class="flex-img" src="img/草原の写真.jpg" alt="" class="flex-img">
   <div class="flex-item">
     <h2 class="flex-title">タイトル</h2>
     <p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
   </div>
 </div>

.flexbox {
 display: flex;
 justify-content: center;
}

.flexbox:nth-child(even) {
 flex-direction: row-reverse;
}

.flex-img {
 width: 43%;
 padding: 20px;
}

.flex-title {
 font-size: 24px;
 font-weight: bold;
 padding-bottom: 30px;
}

.flex-item {
 width: 43%;
 justify-content: flex-start;
 padding: 20px;
}

.flex-text {
 line-height: 1.8rem;
}

この実装で使っている:nth-childのような指定は擬似クラスといい、通常よりも高度なスタイルを実装できます。

:nth-childの使い方についてはこちらの記事で詳しく解説しておりますので、併せてお読みください。

CSSのnth-childとnth-of-typeの使い方と違いを解説

Flexboxの注意点

Flexboxを使用する際の注意点について解説します。

親要素にdisplay: flex;を指定する

flexboxを使用するときは、必ず親要素にdisplay: flex;を指定してください。flexboxを使用するときによくあるミスが以下のようなものです。

• 子要素自体にdisplay: flex;が指定されている
• 横並びにしたい要素がflexコンテナの直下に配置されていない
• 横並びにしたくない要素がflexコンテナの直下に入っている

text-align, vertical-alignは効かない

flexアイテムにtext-alignやvertical-alignなどの位置を指定するプロパティは適用されません。そのため、中央寄せや右寄せが効かないという悩みの原因にもなっています。

flexアイテムの位置を調整するには、この記事でも解説しているjustify-contentやalign-itemsを使用してください。

flexboxのサポート状況

Can I Useによると、2022年9月現在、最新バージョンでは全てのブラウザがFlexboxに対応しています。

flexのサポート状況 -Can I Use

Flexbox Froggy

手を動かしてFlexboxを実践的に理解したい人には、「Flexbox Froggy」がおすすめです。

このサイトはflexに関連するCSSを書くことで、カエルたちを助けてあげようというミニゲームの中でCSSを学習していきます。ゲーム感覚で、直感的に楽しく学習に取り組めることが特徴です。

Flexbox Froggyはこちら

ZeroPlus Gate

「どうしてもFlexboxがわからない！」「全然学習が進まない！」という人には、ZeroPlus Gateがおすすめです。

ZeroPlus Gateでは、豊富でわかりやすい動画教材を使って、Flexboxを含むWeb制作全般の基礎知識を完全無料で学んでいくことができます。さらに全４回のメンターとの面談と、無制限の質問対応つきです。わからない部分や学習上の悩みは、プロのエンジニアと専属のメンターに何度でも質問・相談することができます。

受講料は一切かかりません。どうしてもFlexboxがわからない方、学習に不安のある方にはぴったりの学習サービスです。

ZeroPlus Gateはこちら

まとめ

flexboxを活用することで、レイアウト作成を効率よく行えます。flexboxプロパティの種類は数多く、すべてを使いこなすのは大変かもしれません。しかしflexboxを上手に扱えるようになれば、あなたのコーディングスキルは飛躍的に向上します。

Web制作のレイアウト作りをスムーズに行えるよう、一緒にがんばりましょう！

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー