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

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

目次

flex flexを指定する前の状態
  要素を折り返さずに横に並べるサンプル
  要素を折り返して横に並べるサンプル

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>

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

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なので折り返しません。

実行結果は、以下のイメージです。

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

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の場合は折り返しません。

実行結果は、以下のイメージです。

関連の記事

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

△上に戻る