トップへ(mam-mam.net/)

CSSのflex＆inline-flexを徹底比較｜レイアウト違い・使い分け・実例付き解

flexとinline-flexの概要

CSSのレイアウトを柔軟に制御するには、`flex`と`inline-flex`の違いと適材適所な使い方を理解することが重要です。
このページでは、それぞれのプロパティの特徴・動作の違い・よく使われるレイアウト例を、比較表とサンプルコードを交えて紹介します。
また、`inline-block`との違いや、実際のUI設計で役立つポイントも解説しています。

フレックスボックス(display:flex; display:inline-flex;)は簡単に横並びや縦並びのレイアウトが実装できるのでメニューを作る場合や画像を均等に並べたい場合など、様々な場面で重宝します。

  • 横並び・縦並びレイアウトを簡単に実装
  • 画像やメニューを均等に並べる配置が可能
  • 折り返し・水平方向・垂直方向の揃え方の制御
  • orderで子要素の並び順変更、align-selfで個別配置

フレックスボックスの属性

属性値概要
displayflexblock要素のフレックスボックス
inline-flex `inline-flex`は、`flex`の機能を持ちながらインライン要素として振る舞うプロパティです。
一方、`inline-block`はインライン要素のように横並びになりつつ、幅や高さを指定できる点が特徴です。
両者の違いは、レイアウトの柔軟性と子要素の制御方法にあります。
例えば、`inline-flex`では`justify-content`や`align-items`などのFlexboxの機能が使えるため、より高度な配置が可能です。

フレックスボックスに関連する属性一覧

属性属性の概要値値の概要
flex-wrap 子要素の折り返し指定 nowrap折り返ししない[初期値]
wrap折り返す
wrap-reverse逆順で折り返す
justify-content 水平方向の揃え方を指定 flex-start左寄せ[初期値]
flex-end右寄せ
center中央寄せ
space-between子要素間の間隔を均等
space-around左右を含む子要素の間隔を均等
（子要素間は均等で左端右端は子要素間の半分）
space-evenly左右を含む子要素の間隔を完全に均等
align-items 子要素の垂直方向の揃え方を指定 stretch子要素を親要素の高さに合わせる[初期値]
flex-start上揃え
flex-end下揃え
center上下方向中央揃え
baseline各子要素の1行目のベースライン揃え
align-content 折り返した(flex-wrap:wrap)時の
複数行の揃え方(上下方向)
を指定		 stretch親要素の高さにストレッチ[初期値]
flex-start上寄せ。子要素の高さは行ごとに自動
flex-end下寄せ。子要素の高さは行ごとに自動
center上下中央寄せ。
子要素の高さは行ごとに自動
space-between子要素間の隙間を均等。
子要素の高さは行ごとに自動
space-around上端下端を含む隙間を均等。
（子要素間は均等で上端下端は子要素間の半分）
子要素の高さは行ごとに自動
space-evenly上下を含む子要素の間隔を完全に均等
flex-direction 子要素の並び順を指定 row左から右
row-reverse右から左
column上から下
column-reverse下から上
gap 子要素間（上端、下端、左端、右端含まず）の隙間の間隔 rowgap:4px 32px; /* 行(上下方向)と列(左右方向)の間隔を設定 */

フレックスボックスの子要素に指定できる属性一覧

属性属性の概要値値の概要
align-self 子要素ごとに
垂直方向の位置揃えを指定		 auto親のalign-itemsの値で計算します[初期値]
flex-start上寄せ
flex-end下寄せ
center上下方向中央寄せ
stretch親要素の高さに合わせる
baseline1行目の文字列のベースライン揃え
order 子要素の並び順を指定する 数字 order:1; や order:2; 等を指定する
数字が小さい順に子要素が並び替わる
flex-grow 子要素の拡大係数を指定 負の値は無効、既定値は 0(フレックスアイテムは伸長しません)
flex-shrink 子要素の縮小係数を指定 既定値は 1
flex-basis 子要素の初期の寸法を設定 auto(既定値)、0、200px、1em、50%、max-content、min-content、fit-content などを指定
flex 子要素の拡縮を一括設定 flex-grow
flex-shrink
flex-basis		 拡大比[flex-grow]
縮小比[flex-shrink]
ベースサイズ[flex-basis]
を半角スペース区切りで指定する
デフォルト値は flex:0 1 auto;

display:flex;

要素に定義すると、その子要素が横(flex-direction:row;)又は縦(flex-direction:column;)に並びます。
display:inline-block; は横に並べたい各要素（子要素側）に定義しますが、display:flex; は親要素に定義すると子要素が並びます。

1つ目の
display:flexの
子要素
1つ目の
display:flexの
子要素
1つ目の
display:flexの
子要素
2つ目の
display:flexの
子要素
2つ目の
display:flexの
子要素
2つ目の
display:flexの
子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の<br>display:flexの<br>子要素</div>
  <div>1つ目の<br>display:flexの<br>子要素</div>
  <div>1つ目の<br>display:flexの<br>子要素</div>
</div>
<div class="flex">
  <div>2つ目の<br>display:flexの<br>子要素</div>
  <div>2つ目の<br>display:flexの<br>子要素</div>
  <div>2つ目の<br>display:flexの<br>子要素</div>
</div>
<style>
  .flex{
    display:flex;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



display:inline-flex;

要素に定義すると、その子要素が並ぶのはflexと同じですが、
「inline-block」の性質も併せ持つためflexと違ってinline-flexの要素同士を横並びにできる

1つ目の
display:
inline-flexの
子要素
1つ目の
display:
inline-flexの
子要素
1つ目の
display:
inline-flexの
子要素
2つ目の
display:
inline-flexの
子要素
2つ目の
display:
inline-flexの
子要素
2つ目の
display:
inline-flexの
子要素
HTML・CSSソースコード
<div class="inline-flex">
  <div>1つ目の<br>display:flexの<br>子要素</div>
  <div>1つ目の<br>display:flexの<br>子要素</div>
  <div>1つ目の<br>display:flexの<br>子要素</div>
</div>
<div class="inline-flex">
  <div>2つ目の<br>display:flexの<br>子要素</div>
  <div>2つ目の<br>display:flexの<br>子要素</div>
  <div>2つ目の<br>display:flexの<br>子要素</div>
</div>
<style>
  .inline-flex{
    display:inline-flex;
    width:45%;
    max-width:400px;
    border:1px solid #999999;
    background-color:#DDEEFF;
  }
  /* .inline-flex直下の子要素 */
  .inline-flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



flex-wrapを定義して子要素の折り返しを指定する

flex-wrapを定義すると、その子要素の折り返し方法を指定できる

flex-wrap:nowrap; (折り返ししない[初期値])

子要素を折り返さない。

1つ目の子要素
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:nowrap;
    width:50%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    justify-content: justify-content:flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

flex-wrap:wrap; (折り返す)

子要素を折り返します。

1つ目の子要素
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    width:50%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

flex-wrap:wrap-reverse; (逆順で折り返す)

子要素を逆順で折り返します。

1つ目の子要素
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap-reverse;
    width:50%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



justify-contentを定義して水平方向の揃え方を指定する

justify-contentを定義すると、その子要素の並ぶ方向を指定できる

justify-content:flex-start; (左寄せ[初期値])

子要素を左寄せにします

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    justify-content:flex-start;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

justify-content:flex-end; (右寄せ)

子要素を右寄せにします

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    justify-content:flex-end;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

justify-content:center; (中央寄せ)

子要素を中央寄せにします

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    justify-content:center;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

justify-content:space-between; (隙間を均等)

子要素間の間隔を均等にします

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    justify-content:space-between;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

justify-content:space-around; (左右を含む隙間を均等)

左右を含む子要素の間隔を均等にします

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    justify-content:space-around;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

justify-content:space-evenly; (左右を含む隙間を完全に均等)

左右を含む子要素の間隔を完全に均等にします

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    justify-content:space-evenly;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



align-itemsを定義して垂直方向の揃え方を指定する

align-itemsを定義すると、その子要素の垂直方向の揃え方を指定できる

align-items:stretch; (子要素を親要素の高さに合わせる[初期値])

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素
HTML・CSSソースコード
<div class="flex">
  <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div>
  <div style="font-size:18pt;">18ptの子要素</div>
  <div style="font-size:24pt;">24ptの子要素</div>
</div>
<style>
  .flex{
    display:flex;
    align-items:stretch;
    height:100px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-items:flex-start; (上揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素
HTML・CSSソースコード
<div class="flex">
  <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div>
  <div style="font-size:18pt;">18ptの子要素</div>
  <div style="font-size:24pt;">24ptの子要素</div>
</div>
<style>
  .flex{
    display:flex;
    align-items:flex-start;
    height:100px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-items:flex-end; (下揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素
HTML・CSSソースコード
<div class="flex">
  <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div>
  <div style="font-size:18pt;">18ptの子要素</div>
  <div style="font-size:24pt;">24ptの子要素</div>
</div>
<style>
  .flex{
    display:flex;
    align-items:flex-end;
    height:100px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-items:center; (上下中央揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素
HTML・CSSソースコード
<div class="flex">
  <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div>
  <div style="font-size:18pt;">18ptの子要素</div>
  <div style="font-size:24pt;">24ptの子要素</div>
</div>
<style>
  .flex{
    display:flex;
    align-items:center;
    height:100px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-items:baseline; (1行目の文字列のベースライン揃え)

12ptの子要素
内で改行した
18ptの子要素
24ptの子要素
HTML・CSSソースコード
<div class="flex">
  <div style="font-size:12pt;">12ptの子要素<br>内で改行した</div>
  <div style="font-size:18pt;">18ptの子要素</div>
  <div style="font-size:24pt;">24ptの子要素</div>
</div>
<style>
  .flex{
    display:flex;
    align-items:baseline;
    height:100px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



align-contentを定義して折り返したときの複数行の揃え方を指定する

flex-wrap:wrap; (折り返し) を指定した時にalign-contentを定義すると、複数行の揃え方を指定できる

align-content:stretch; (親要素の高さにストレッチ[初期値])

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:stretch;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-content:flex-start; (上寄せ。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-content:flex-end; (下寄せ。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-end;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-content:center; (上下中央寄せ。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-content:space-between; (隙間を均等。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:space-between;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-content:space-around; (上下を含む隙間を均等。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:space-around;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

align-content:space-evenly; (上下を含む隙間を完全に均等。子要素の高さは行ごとに自動)

1つ目の子要素
brで改行
2つ目の子要素
3つ目の子要素
4つ目の子要素
5つ目の子要素
6つ目の子要素
7つ目の子要素
8つ目の子要素
9つ目の子要素
10個目の子要素
brで改行
11個目の子要素
12個目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素<br>brで改行</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
  <div>4つ目の子要素</div>
  <div>5つ目の子要素</div>
  <div>6つ目の子要素</div>
  <div>7つ目の子要素</div>
  <div>8つ目の子要素</div>
  <div>9つ目の子要素</div>
  <div>10個目の子要素<br>brで改行</div>
  <div>11個目の子要素</div>
  <div>12個目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-wrap:wrap;
    align-content:space-evenly;
    height:200px;
    width:90%;
    max-width:420px;
    border:1px solid #999999;
    margin:10px;
    justify-content: flex-start;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



flex-directionを定義して並び順を指定する

flex-directionを定義すると、その子要素の並ぶ方向を指定できる

flex-direction:row; (左から右)

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-direction:row;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

flex-direction:row-reverse; (右から左)

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-direction:row-reverse;
    height:60px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

flex-direction:column; (上から下)

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-direction:column;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>

flex-direction:column-reverse; (下から上)

1つ目の子要素
2つ目の子要素
3つ目の子要素
HTML・CSSソースコード
<div class="flex">
  <div>1つ目の子要素</div>
  <div>2つ目の子要素</div>
  <div>3つ目の子要素</div>
</div>
<style>
  .flex{
    display:flex;
    flex-direction:column-reverse;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



子要素にalign-selfを定義して子要素ごとに垂直方向の位置揃えを指定する

子要素にalign-selfを定義すると、子要素ごとに垂直方向の位置揃えを指定できる

align-self:auto;
[初期値]
親のalign-itemsの値で計算します。
align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:stretch;
align-self:baseline;
font-size:10pt;
(1行目の文字列のベースライン揃え)
align-self:baseline;
font-size:20pt;
HTML・CSSソースコード
<div class="flex">
  <div style="align-self:auto;">align-self:auto;<br>[初期値]<br>親のalign-itemsの値で計算します。</div>
  <div style="align-self:flex-start;">align-self:flex-start;</div>
  <div style="align-self:flex-end;">align-self:flex-end;</div>
  <div style="align-self:center;">align-self:center;</div>
  <div style="align-self:stretch;">align-self:stretch;</div>
  <div style="align-self:baseline;font-size:10pt;">align-self:baseline;<br>font-size:10pt;<br> (1行目の文字列のベースライン揃え)</div>
  <div style="align-self:baseline;font-size:20pt;">align-self:baseline;<br>font-size:20pt;</div>
</div>
<style>
  .flex{
    display:flex;
    height:200px;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



子要素にflex(拡大比[flex-grow] 縮小比[flex-shrink] ベースサイズ[flex-basis])プロパティを定義して親要素(display:flex)が拡縮した時の各子要素の拡縮を設定する

flex:0 0 140px;
140px固定
flex:1 0 140px;
140px以上になる
flex:0 1 auto;
デフォルト値
flex:0 0 140px;
140px固定
HTML・CSSソースコード
<div class="flex"">
  <div style="flex:0 0 140px;">flex:0 0 140px;<br>140px固定<br></div>
  <div style="flex:1 0 140px;">flex:1 0 140px;<br>140px以上になる<br></div>
  <div style="flex:0 1 auto;">flex:0 1 auto;<br>デフォルト値<br></div>
  <div style="flex:0 0 140px;">flex:0 0 140px;<br>140px固定<br></div>
</div>
<style>
  .flex{
    display:flex;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
</style>



最後の子要素にmargin-left:auto;を設定すると、最後の子要素だけ右寄せにできる

子要素１
子要素２
子要素３
子要素に、margin-left:auto;
を入れると、ここだけ右寄せになる
HTML・CSSソースコード
<div class="flex"">
  <div>子要素１<br></div>
  <div>子要素２<br></div>
  <div>子要素３<br></div>
  <div>子要素に、margin-left:auto;<br>を入れると、ここだけ右寄せになる</div>
</div>
<style>
  .flex{
    display:flex;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
  /* .flex直下の子要素の最後の子要素 */
  .flex > div:last-child{
    margin-left:auto;
  }
</style>



子要素にorder:並び順; 属性を設定すると、子要素の並び順を設定できる

１個目の子要素
order:3;
２個目の子要素
order:1;
３個目の子要素
order:2;
HTML・CSSソースコード
<div class="flex-order">
  <div>１個目の子要素<br>order:3;</div>
  <div>２個目の子要素<br>order:1;</div>
  <div>３個目の子要素<br>order:2;</div>
</div>
<style>
  .flex-order{
    display:flex;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
  }
  /* .flex直下の子要素 */
  .flex-order > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
  }
  .flex-order > div:nth-child(1){order:3;}/*3番目に表示*/
  .flex-order > div:nth-child(2){order:1;}/*1番目に表示*/
  .flex-order > div:nth-child(3){order:2;}/*2番目に表示*/
</style>



gap:隙間の大きさ; 属性を使うと子要素間の余白を設定することができます

子要素
子要素
子要素
子要素
子要素
子要素
子要素
子要素
子要素
子要素
子要素
子要素
<div class="flex-gap">
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
  <div>子要素</div>
</div>

<style>
  .flex-gap{
    display:flex;
    width:90%;
    max-width:800px;
    border:1px solid #999999;
    margin:10px;
    background-color:#DDEEFF;
    flex-wrap:wrap;
    gap:4px 32px; /* 行と列の余白 */
  }
  /* .flex直下の子要素 */
  .flex-gap > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#CCDDFF;
    padding:20px;
  }
</style>