CSSのdisplay:flex、inline-flexの使い方　～フレックスボックス

display:flex;

要素に定義すると、その子要素が横(flex-direction:row;)又は縦(flex-direction:column;)に並びます。
display:inline-box; は横に並べたい各要素（子要素側）に定義しますが、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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

display:inline-flex;

要素に定義すると、その子要素が並ぶのはflexと同じですが、
「inline-block」の性質も併せ持つためflexと違って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>
  .flex{
    display:inline-flex;
    width:45%;
    max-width:400px;
    border:1px solid #999999;
    background-color:#FFFFEE;
  }
  /* .inline-flex直下の子要素 */
  .inline-flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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

子要素を折り返さない。

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

子要素を折り返します。

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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

子要素を左寄せにします

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

子要素を右寄せにします

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

左右を含む子要素の間隔を完全に均等にします
Internet Explorerは対応していません

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > *{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

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

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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
</style>

最後の子要素に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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
  /* .flex直下の子要素の最後の子要素 */
  .flex > div:last-child{
    margin-left:auto;
  }
</style>

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

HTML・CSSソースコードを見る

<div class="flex">
  <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:#FFFFEE;
  }
  /* .flex直下の子要素 */
  .flex-order > div{
    border:1px solid #000000;
    word-break: break-all;
    overflow-wrap: anywhere;
    background-color:#FFFFBB;
  }
  .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>

（参考）本サイト内でCSSのdisplay:flexを使用したサンプル

ページ内に複数ページとページャー作成
display:flex;で横並びメニュー作成
display:flex;でサブメニューがある横並びメニュー作成
SVGアイコンを下部固定した横並びメニューのページを作る
フェードイン、フェードアウトしながら切り替わるタブメニューを作る