CSSプロパティ②

テキスト目次 > HTMLとCSSの基礎 >CSSプロパティ②

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。
 

フレックスボックスは、display:flexで実現でき、従来のfloatよりも柔軟なレイアウトを組むことができます。

目次

フレックスボックス display:flexの使い方

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。

display:flexを設定することで、cssのflexbox（フレックスボックス）と呼ばれるレイアウトモードを使用することができます。

シンプルな使い方は下記の通り。通常縦並びになる要素ですが、親要素をdisplay:flexを設定して(フレックスコンテナにして)、子要素を横並びにすることができます。

フレックスコンテナ(親要素)に設定できる項目は以下の通りです。

項目意味
display:flex【最重要(必須)】　フレックスコンテナの指定
justify-content【重要】 (主軸に対して)子要素同士をどのような間隔で並べるかを指定するプロパティ
flex-wrap【重要】 子要素(フレックスアイテム)を一行に並べるか、複数行に並べるかを指定するプロパティ
flex-direction【重要】 子要素(フレックスアイテム)をどの方向に並べていくかを指定するプロパティ
align-itemsflex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ
flex系のプロパティはたくさんありますが、特によく使う【重要】と記載しているプロパティをまず覚えておきましょう。

フレックスアイテム(子要素)には下記のプロパティが設定できます。子要素をどのようなレイアウトにするか指定できるプロパティですが、必要ない場合は設定しなくても構いません。

項目意味
orderフレックスアイテムの並べる順番をどうするか指定するプロパティ
flex-growフレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティ
flex-shrinkフレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティ
flex-basisflex-basisはwidthのように幅を指定するプロパティ。flex-basisとwidthの両方が設定されている場合は、flex-basisが優先されます。初期値はauto。
flexflex-grow、flex-shrink、flex-basisを１つにまとめて記載できるプロパティ

(補足)Webブラウザの互換性について

display:flexは2023年時点でほぼ全てのブラウザに対応していますので、安心して利用できます。

※https://caniuse.com/より引用 2023年1月時点

なお、数年前に作ったサイトの場合は、古いブラウザ対応を明示的にするために、ベンタープレフィックス(-webkit-xxx など)を付けている場合もあります。

display:-webkit-flex;
display:flex;
CSS

フレックスコンテナ(親要素)に設定できるflex系プロパティ

まずは、フレックスコンテナ(親要素)に設定できるflex系のプロパティを説明していきます。

項目意味
display:flex【最重要(必須)】　フレックスコンテナの指定
justify-content【重要】 (主軸に対して)子要素同士をどのような間隔で並べるかを指定するプロパティ
flex-wrap【重要】 子要素(フレックスアイテム)を一行に並べるか、複数行に並べるかを指定するプロパティ
flex-direction【重要】 子要素(フレックスアイテム)をどの方向に並べていくかを指定するプロパティ
align-itemsflex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ

フレックスボックスの基本設定 display:flex

フレックスボックスを利用するためには、flexboxを利用する親要素に、display:flexを追加します。これにより、親要素がflexコンテナとなり、子要素がflexアイテムとなります。

■表示例　親要素にdisplay:flexを指定

■上記のソースコード

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flexbox</title>
  <style>
     *{
       box-sizing: border-box;
     }
    #flexbox{
      display:flex;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item{
      background:orange;
      text-align: center;
      padding:15px 40px;
      border:5px solid #ddd;
    }    
  </style>
</head>
<body>
  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>
</body>
</html>
HTML

なお、孫要素(フレックスアイテム内にある要素)はflexで横並び(フレックスアイテム)になるわけではない点に注意。通常通りの配置になる点も覚えておきましょう。

フレックスアイテムの配置設定 justify-content

justify-contentというプロパティを使用すると、flex-directionで指定したフレックスコンテナの方向に沿って、フレックスアイテムをどのように配置するかを設定できます。
 

項目内容
justify-content:flex-start主軸の始点に配置します(デフォルト）
justify-content:flex-end主軸の終点に配置します
justify-content:center主軸の中央に配置します
justify-content:space-between両端から均等に配置します
justify-content:space-around主軸に対し均等間隔に配置します

以下は、display:flexと合わせて、justify-contentを設定した例です。


justify-content:flex-start(初期値)

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flexbox</title>
  <style>
     *{
       box-sizing: border-box;
     }
    #flexbox{
      display:flex; 
      justify-content:flex-start;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item{
      background:orange;
      text-align: center;
      padding:15px 40px;
      border:5px solid #ddd;
    }    
  </style>
</head>
<body>
  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>
</body>
</html>
HTML

justify-content:flex-end

    #flexbox{
      display:flex;
      justify-content:flex-end;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
CSS

justify-content:center

    #flexbox{
      display:flex;
      justify-content:center;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
CSS

justify-content:space-between

    #flexbox{
      display:flex;
      justify-content:space-between;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
CSS

justify-content:space-around

    #flexbox{
      display:flex;
      justify-content:space-around;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
CSS

なお、後述のflex-directionをcolumnに設定している場合は、垂直方向の配置を制御することになります。

フレックスアイテムを一行に収めるか複数行にするか flex-wrap

flex-wrapプロパティは、フレックスアイテムを一行(一列)に収めるか、複数行を許可するかを指定するプロパティです。
 

floatなどのプロパティーと違いとして、フレックスアイテムが親要素の幅を超えても、超えた分が下の行に落ちず必ず一行内に収まるようになっています(縮まったりはみ出したりします。)。親要素の幅を超える時に複数行にするかしないかの設定がflex-wrapです。

項目意味
flex-wrap:nowrap(初期値)フレックスアイテムが一行に収まらない時でも1行に収める。
※収まらない場合は、フレックスアイテムにwidthを設定しても効かなかったりはみ出したりする
flex-wrap:wrapフレックスアイテムが一行に収まらない時に複数行にする
flex-wrap:wrap-reverseフレックスアイテムが一行に収まらない時に複数行にする(順番を逆にする)
■flex-wrap:wrapを指定していない場合、子要素にwidth:50%を設定しても縮んで一行に収まります。

■flex-wrap:wrapを指定すると50%が効いて複数行になります。

■上記のソースコード

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flexbox</title>
  <style>
     *{
       box-sizing: border-box;
     }
    #flexbox{
      display:flex; 
      flex-wrap: wrap;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item{
      width: 50%;
      background:orange;
      text-align: center;
      padding:15px 40px;
      border:5px solid #ddd;
    }    
  </style>
</head>
<body>
  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>
</body>
</html>
HTML

■ただし、フレックスアイテムの合計の横幅が100%に収まる場合はwidthが効きます。

フレックスアイテムの方向設定 flex-direction

flex-directionプロパティは、フレックスコンテナの方向(主軸)を指定するプロパティです。フレックスアイテム(子要素)はこの主軸の方向に沿って配置されます。
 

■flex:direction 主軸の向きを決定する(横方向)

■flex:direction:column (column-reverse)の場合は垂直方向に並びます。

初期値は、flex-direction:rowです。子要素が左から右へ順番に配置されます。初期値なので省略することが多いです。

項目意味
flex-direction:row (初期値)左から右に配置(初期値)
flex-direction:row-reverse右から左に配置
flex-direction:column上から右に配置
flex-direction:column-reverse下から上に配置

表示例　flex-direction:row-revese(右から左へ)

■上記（flex-direction:row-revese）のソースコード

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flexbox</title>
  <style>
     *{
       box-sizing: border-box;
     }
    #flexbox{
      display:flex; 
      flex-direction:row-reverse;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item{
      background:orange;
      text-align: center;
      padding:15px 40px;
      border:5px solid #ddd;
    }    
  </style>
</head>
<body>
  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>
</body>
</html>
HTML

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

    #flexbox{
      display:flex;
      flex-direction:column;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
CSS

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

    #flexbox{
      display:flex;
      flex-direction:column-reverse;
      background:#ddd;
      width: 100%;
      height:auto;
      padding:10px;
    }
CSS

フレックスアイテムの交差軸の配置設定 align-items

flexboxは2つの軸を持っています。flex-directionで設定した向きが主軸で、主軸に対して垂直な軸を交差軸といいます。
 

align-itemsプロパティを利用すると、flexコンテナの交差軸に沿って、flexアイテムをどのように配置するかを設定できます。
 

以下は、主軸が水平の場合の、主軸と交差軸です。

align-itemに設定できる項目は以下の通り。

項目意味
align-items:stretch交差軸の始点から終点まで伸縮する(初期値) ※heightを設定していない場合
align-items:flex-start交差軸の始点に配置する
align-items:flex-end交差軸の終点に配置する
align-items:center交差軸の中央に配置する
align-items:space-baseline交差軸のベースラインに配置する
■主軸が水平方向(flex-direction:row)の場合、aligh-itemsは、垂直方向の交差軸に対して配置を制御します。

なお、主軸が垂直方向(flex-direction:column)の場合、flex-alignsは水平方向の交差軸に対して配置を制御します。

フレックスアイテム(子要素)に設定できるflex系プロパティ

ここからは、フレックスアイテム(子要素)に設定できるflex系プロパティをご紹介していきます。
 

項目意味
orderフレックスアイテムの並べる順番をどうするか指定するプロパティ
flex-growフレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティ
flex-shrinkフレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティ
flex-basisflex-basisはwidthのように幅を指定するプロパティ。flex-basisとwidthの両方が設定されている場合は、flex-basisが優先されます。初期値はauto。
align-selfflex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ

順番を制御 Order

orderプロパティを利用すると、フレックスアイテム(子要素)の順番を制御することができます。
 

■表示例

■上記のソースコード

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flexbox</title>
  <style>
     *{
       box-sizing: border-box;
     }
    #flexbox{
      display:flex; 
      background:#ddd;
      width: 100%;
      padding:10px;
    } 
    .box-item{
      background:orange;
      text-align: center;
      padding:15px 40px;
      border:5px solid #ddd;
    }    
  </style>
</head>
<body>
  <div id="flexbox">
    <div class="box-item" style="order:3">1</div>
    <div class="box-item" style="order:4">2</div>
    <div class="box-item" style="order:5">3</div>
    <div class="box-item" style="order:1">4</div>
    <div class="box-item" style="order:2">5</div>               
  </div>
</body>
</html>
HTML

フレックスアイテムの幅の指定flex-basis

フレックスアイテムの幅の指定をするプロパティがflex-basisです。
 

flex-basis初期値はautoです。flex-basisは、widthと同じ意味でflex-basisとwidthの両方が設定されている場合は、flex-basisが優先されます。
 

■flex-basisの表示例

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flexbox</title>
  <style>
     *{
       box-sizing: border-box;
     }
    #flexbox{
      display:flex; 
      background:#ddd;
      width: 100%;
      padding:10px;
    } 
    .box-item{
      background:orange;
      text-align: center;
      padding:15px 40px;
      border:5px solid #ddd;
    }    
  </style>
</head>
<body>
  <div id="flexbox">
    <div class="box-item" style="flex-basis:30%;">1</div>
    <div class="box-item" style="flex-basis:30%;">2</div>
    <div class="box-item" style="flex-basis:150px;">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>               
  </div>
</body>
</html>
HTML

フレックスアイテムをどのくらい伸ばすか flex-grow

フレックスアイテムを他の要素と比べてどのくらい伸ばすか指定できるプロパティがflex-growです。
 

■flex:growのサンプル例

■上記のソースコード

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item" style="flex-grow:0">2</div>
    <div class="box-item" style="flex-grow: 1;">3</div>
    <div class="box-item" style="flex-grow: 2;">4</div>
    <div class="box-item" style="flex-grow: 3;">5</div>               
  </div>
HTML

フレックスアイテムをどのくらい縮めるか　flex-shrink

フレックスアイテムを他の要素と比べてどのくらい縮めるか指定できるプロパティがflex-growです。数字を設定でき、初期値(伸縮なし)は「0」です。

チェックテスト

チェックテストを確認する

下記4のうちdisplayプロパティの挙動として正しい選択肢をdiscordにて共有ください。

①displayプロパティにflexを指定すると子要素が縦並びになる

②displayプロパティにflexを指定すると親要素が縦並びになる

③displayプロパティにflexを指定すると子要素が横並びになる

④displayプロパティにflexを指定すると親要素が横並びになる

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP