CSS displayのflexで要素を横に並べるサンプル

CSSのdisplayのflexで要素を横に並べるサンプルです。
flexは曲げるという意味です。

目次

サンプル 1.flexを指定する前の状態
  2.要素を折り返さずに横に並べるサンプル
  3.要素を折り返して横に並べるサンプル
  水平方向の位置を指定する(flex + justify-content)
  垂直方向の位置を指定する(flex + align-items)
  要素の並び順を逆にする(flex+flex-direction)

1.flexを指定する前の状態

flexを指定する前の状態です。
要素が縦に3つ並んでいます。これをflexを使用して横に並べます。

<style>
#parent1{
    width: 150px;
    padding:10px;
    border: 1px solid #000;
}
.cilid1{
    background:LightSkyBlue;
    text-align: center;
    width: 60px;
    border: 1px solid #000;
}    
</style>

<div id="parent1">
    <div class="cilid1">a</div>
    <div class="cilid1">b</div>
    <div class="cilid1">c</div>
</div>

2.要素を折り返さずに横に並べるサンプル

flexを使用して要素を横に並べるサンプルです。折り返しません。

<style>
#parent1{
    display:flex;
    flex-wrap: nowrap;
    width: 150px;
    padding:10px;
    border: 1px solid #000;
}
.cilid1{
    background:LightSkyBlue;
    text-align: center;
    width: 60px;
    border: 1px solid #000;
}    
</style>

<div id="parent1">
    <div class="cilid1">a</div>
    <div class="cilid1">b</div>
    <div class="cilid1">c</div>             
</div>

3行目は、親要素にdisplay:flexを指定します。必須です。
4行目は、flex-wrapにnowrapを指定しています。子の要素は折り返しません。
5行目は、widthが150pxです。
子要素のwidthは、12行目で60pxです。3つで180pxあり、親の150pxを超えていますが、nowrapなので折り返しません。

3.要素を折り返して横に並べるサンプル

flexを使用して要素を横に並べるサンプルです。折り返します。

<style>
#parent1{
    display:flex;
    flex-wrap: wrap;
    width: 150px;
    padding:10px;
    border: 1px solid #000;
}
.cilid1{
    background:LightSkyBlue;
    text-align: center;
    width: 60px;
    border: 1px solid #000;
}    
</style>

<div id="parent1">
    <div class="cilid1">a</div>
    <div class="cilid1">b</div>
    <div class="cilid1">c</div>
</div>

3行目は、親要素にdisplay:flexを指定します。必須です。
4行目は、flex-wrapのwrapを指定しています。子が親の幅を超えていた場合、折り返します。
5行目は、widthが150pxです。
子要素のwidthは、12行目で60pxです。3つで180pxあり、親のwidthを超えているので折り返します。
仮に5行目のwidthが300pxの場合は折り返しません。

水平方向の位置を指定する(flex + justify-content)

flex+justify-contentは、要素の水平方向の位置を指定できます。
<style>
  #parent1 {
    display: flex;
    justify-content: space-around;
    width: 250px;
    border: 1px solid #000;
  }
  .cilid1 {
    background: LightSkyBlue;
    text-align: center;
    width: 60px;
    border: 1px solid #000;
  }
</style>
<div id="parent1">
  <div class="cilid1">a</div>
  <div class="cilid1">b</div>
  <div class="cilid1">c</div>
</div>

4行目は、justify-contentのspace-aroundで要素の間隔を均等にしています。
この他にも中央に寄せるcenter他の値があります。

以下は、MDNのjustify-contentのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

垂直方向の位置を指定する(flex + align-items)

flex+align-itemsは、要素の垂直方向の位置を指定できます。
flex-startは、先頭にそろえます。

<style>
  #parent1 {
    display: flex;
    align-items: flex-start;
    width: 150px;
    height:70px;
    border: 1px solid #000;
  }
  .cilid1 {
    background: LightSkyBlue;
    text-align: center;
    width: 60px;
    border: 1px solid #000;
  }
</style>
<div id="parent1">
  <div class="cilid1">a</div>
  <div class="cilid1">b</div>
  <div class="cilid1">c</div>
</div>

4行目は、align-itemsのflex-startで先頭にそろえています。

以下は、align-itemsにflex-endを指定したサンプルです。
flex-endは、末尾に寄せます。

以下は、MDNのalign-itemsのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/align-items

要素の並び順を逆にする(flex+flex-direction)

flex+flex-directionは、要素の並び順を逆にできます。
column-reverseは要素を逆にします。

<style>
  #parent1 {
    display: flex;
    flex-direction: column-reverse;
    width: 150px;
    border: 1px solid #000;
  }
  .cilid1 {
    background: LightSkyBlue;
    text-align: center;
    width: 50px;
    border: 1px solid #000;
  }
</style>
<div id="parent1">
  <div class="cilid1">a</div>
  <div class="cilid1">b</div>
  <div class="cilid1">c</div>
</div>

4行目は、flex-directionのcolumn-reverseで要素を逆にしています。(a→b→c)を(c→b→a)に変更。

以下は、flex-directionにrow-reverseを指定したサンプルです。
row-reverseは、水平方向で逆にします。

関連の記事

CSS 回り込みと解除のサンプル(floatとclear)
CSS display 要素(ボックス)の表示方法を指定する

△上に戻る