ホーム プログラミング言語 Web関連 css3 CSS フレックス レイアウト (エラスティック レイアウト / エラスティック ボックス)

CSS フレックス レイアウト (エラスティック レイアウト / エラスティック ボックス)

 
 
Flex は Flexible Box の略で、「elastic layout」または「flexible box」を意味します. CSS3 の新しいレイアウト モードで、さまざまなページ レイアウトをシンプルで完全かつレスポンシブな方法で実現できます. どんな画面サイズにも対応します.およびデバイスの種類。現在、ほとんどすべてのブラウザーが Flex レイアウトをサポートしています。

 

1. 基本コンセプト

Flex レイアウトを採用する要素は、フレックス コンテナー、または略して「コンテナー」と呼ばれます。そのすべての子要素は、自動的にフレックス アイテム、または略して「アイテム」と呼ばれるコンテナのメンバーになります。コンテナーには、デフォルトで水平主軸と垂直交差軸の 2 つの軸があります。主軸の開始位置を主始点、終点を主終点、横軸の始点を横始点、終点を交点終点と呼びます。デフォルトでは、アイテムは主軸に沿って配置されます。 1つのアイテムが占める主軸のスペースをメインサイズ、1つのアイテムが占める横軸のスペースをクロスサイズと呼びます。以下に示すように:

Flexについて developer.mozilla.orgにより
Flexについて developer.mozilla.orgにより

ヒント: 要素の display プロパティを flex (ブロック レベルのフレックス コンテナーを生成する) または inline-flex (インライン ブロックに似たインライン ブロック レベルのフレックス コンテナーを生成する) に設定できます。要素にフレックス レイアウトが設定されている場合、その子要素の float、clear、vertical-align などのプロパティは無効になります。

フレックス レイアウトを実装するために、次のプロパティが CSS で提供されます。

属性 説明
display HTML 要素のボックス タイプを指定します
flex-direction フレックスボックス内の子要素の配置を指定します
flex-wrap フレックスボックスの子要素が親コンテナを超えた場合にラップするかどうかを設定します
flex-flow 2 つのプロパティ flex-direction と flex-wrap の省略形
justify-content フレックスボックス内の要素の配置を主軸 (水平軸) の方向に設定します
align-items フレックスボックス内の要素の配置を横軸(縦軸)方向に設定します
align-content align-items と同様に flex-wrap プロパティの動作を変更しますが、子要素の配置を設定する代わりに、行の配置を設定します
order フレックスボックス内の子要素のソート順を設定する
align-self コンテナーの align-items プロパティをオーバーライドするために、フレックスボックスの子要素で使用されます
flex フレックスボックスの子要素がスペースを割り当てる方法を設定する
flex-grow フレックスボックスの拡大率を設定する
flex-shrink フレックスボックスの縮小率を設定する
flex-basis エラスティック ボックス ストレッチの基本値を設定します

さまざまなスコープに従って、これらのプロパティは 2 つのカテゴリ、つまりコンテナー プロパティ (flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content) とアイテム プロパティ (order、align – self、flex、flex-grow、flex-shrink、flex-basis)。これらの属性の使用法を紹介しましょう。

2.コンテナのプロパティ

1)flex-direction

flex-direction 属性は、主軸の方向 (つまり、アイテムが配置される方向) を決定するために使用されます. 属性のオプションの値は次のとおりです:

価値 説明
row デフォルトでは、主軸は左から右に水平に伸びます
row-reverse 主軸は右から左へ水平に走る
column 主軸は上から下に垂直に走る
column-reverse 主軸は下から上に垂直に走る
initial このプロパティをプロパティのデフォルト値として設定します
inherit この属性の値を親要素から継承します

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #migi {
            border: 1px solid #CCC;
            padding: 5px;
            position: relative;
        }
        .yoko, .yoko_reverse, .tate, .tate_reverse{
            display: flex;
            margin-bottom: 5px;
        }
        .yoko {
            flex-direction: row;
        }
        .yoko_reverse {
            flex-direction: row-reverse;
        }
        .tate {
            flex-direction: column;
        }
        .tate_reverse {
            flex-direction: column-reverse;
            position: absolute;
            top: 120px;
            left: 400px;
        }
        .yoko div, .yoko_reverse div, .tate div, .tate_reverse div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="migi">
        <div class="yoko">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="yoko_reverse">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="tate">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="tate_reverse">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: flex-direction プロパティのデモ
図: flex-direction プロパティのデモ

2)flex-wrap

flex-wrap 属性は、フレックス ボックスの子要素 ​​(項目) が親コンテナーを超える場合にラップするかどうかを設定するために使用されます. 属性のオプション値は次のとおりです:

価値 説明
nowrap デフォルト値。アイテムがラップされないことを意味します
wrap 必要に応じてアイテムが折り返されることを示します
wrap-reverse アイテムが必要に応じて折り返されることを示しますが、逆の順序になります
initial このプロパティをプロパティのデフォルト値として設定します
inherit 親要素から属性の値を継承する

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .nowrap, .wrap, .wrap_reverse {
            display: flex;
            flex-direction: row;
            margin-bottom: 15px;
        }
        .nowrap {
            flex-wrap: nowrap;
        }
        .wrap {
            flex-wrap: wrap;
        }
        .wrap_reverse {
            flex-wrap: wrap-reverse;
        }
        .nowrap div, .wrap div, .wrap_reverse div { 
            width: 70px; 
            height: 50px; 
            border: 1px solid black; 
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="nowrap">
            <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>10</div>
        </div>
        <div class="wrap">
            <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>10</div>
        </div>
        <div class="wrap_reverse">
            <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>10</div>
        </div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: flex-wrap プロパティのデモ
図: flex-wrap プロパティのデモ

3)flex-flow

flex-flow 属性は、2 つの属性 flex-direction と flex-wrap の省略形です。構文は次のとおりです。

フレックス フロー: フレックス方向フレックス ラップ。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .フレックス_フロー {
            display: flex;
            flex-flow: row-reverse wrap;
        }
        .フレックス_フロー div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="フレックス_フロー">
        <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>10</div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: フレックス フロー プロパティのデモンストレーション
図: フレックス フロー プロパティのデモンストレーション

4)justify-content

justify-content 属性は、主軸 (水平軸) の方向に弾性ボックス内の要素の配置を設定するために使用されます. 属性のオプションの値は次のとおりです:

価値 説明
flex-start デフォルト、左揃え
flex-end 右揃え
center 中央に
space-between 正当化され、アイテム間の間隔は等しい
space-around 各アイテムの両側に等間隔
initial このプロパティをプロパティのデフォルト値として設定します
inherit 親要素から属性の値を継承する

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 10px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
        .flex-start {
            justify-content: flex-start;
        }
        .flex-end {
            justify-content: flex-end;
        }
        .center {
            justify-content: center;
        }
        .space-between {
            justify-content: space-between;
        }
        .space-around  {
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="flex flex-start">
        <div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
    </div>
    <div class="flex flex-end">
        <div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
    </div>
    <div class="flex center">
        <div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
    </div>
    <div class="flex space-between">
        <div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
    </div>
    <div class="flex space-around">
        <div>エー</div><div>ビー</div><div>シー</div><div>ディー</div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: justify-content 属性のデモ
図: justify-content 属性のデモ

5)align-items

align-items 属性は、横軸 (垂直軸) の方向に弾性ボックス内の要素の配置を設定するために使用されます. 属性のオプションの値は次のとおりです:

価値 説明
stretch デフォルトでは、アイテムはコンテナに合わせて引き伸ばされます
center アイテムはコンテナの中央に配置されます
flex-start アイテムはコンテナの上部にあります
flex-end アイテムはコンテナの底にあります
baseline アイテムはコンテナのベースラインに揃えられます
initial このプロパティをプロパティのデフォルト値として設定します
inherit 親要素から属性の値を継承する

6) align-content

align-content 属性は justify-content 属性に似ています. 弾性ボックスの横軸に余分なスペースがある場合に, コンテナ内のアイテムの配置を調整できます. この属性のオプション値は次のとおりです.次のように:

価値 説明
stretch デフォルト、残りのスペースを占めるようにアイテムを引き伸ばします
center アイテムはコンテナ内の中央に配置されます
flex-start アイテムはコンテナの上部に配置されます
flex-end コンテナの底にアイテムが配置されています
space-between 複数行のアイテムはコンテナ内で均等に分散され、最初の行がコンテナの上部に分散され、最後の行がコンテナの下部に分散されます。
space-around 複数行のアイテムはコンテナ内で等間隔に配置され、各行はコンテナの端から等間隔で配置されます
initial このプロパティをプロパティのデフォルト値として設定します
inherit この属性の値を親要素から継承します

 

 
3. プロジェクトのプロパティ

1)order

order 属性は、コンテナに表示される項目の順序を設定するために使用されます。特定の値を使用して、コンテナ内の項目の位置を定義できます。属性の構文は次のとおりです。

order: number;

number はコンテナ内のアイテムの位置で、デフォルト値は 0 です。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 10px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
        .flex div:nth-child(1) {
            order: 5;
        }
        .flex div:nth-child(2) {
            order: 3;
        }
        .flex div:nth-child(3) {
            order: 1;
        }
        .flex div:nth-child(4) {
            order: 2;
        }
        .flex div:nth-child(5) {
            order: 4;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: 注文属性のデモ
図: 注文属性のデモ

2)align-self

align-self 属性を使用すると、アイテムの配置を他のアイテムとは異なる方法で設定できます。これにより、align-items 属性の値をオーバーライドできます。 align-self 属性のオプションの値は次のとおりです。

価値 説明
auto 要素がその親コン​​テナの align-items 属性の値を継承することを示すデフォルト値、または親コンテナがない場合は「ストレッチ」
stretch アイテムはコンテナに収まるように引き伸ばされます
center アイテムはコンテナの中央に配置されます
flex-start アイテムはコンテナの上部にあります
flex-end アイテムはコンテナの底にあります
baseline アイテムはコンテナのベースラインに揃えられます
initial このプロパティをプロパティのデフォルト値として設定します
inherit 親要素から属性の値を継承する

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .フレックス {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
            height: 150px;
        }
        .フレックス div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .フレックス div:nth-child(4) {
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <div class="フレックス">
        <div>あ</div><div>い</div><div>う</div><div>え</div><div>お</div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: align-self 属性のデモ
図: align-self 属性のデモ

3) flex

flex 属性は、3 つの属性 flex-grow、flex-shrink、および flex-basis の省略形です。構文は次のとおりです。

flex: flex-grow flex-shrink flex-basis;

パラメータの説明は次のとおりです。

  • flex-grow: (必須パラメーター) 数値。他のアイテムと比較してアイテムの成長を設定するために使用されます。デフォルト値は 0 です。
  • flex-shrink: (オプションのパラメーター) 他のアイテムに対するアイテムの収縮を設定するために使用される数値。デフォルト値は 1 です。
  • flex-basis: (オプションのパラメーター) アイテムの長さ。正当な値は auto (デフォルト値、自動を意味します)、inherit (属性の値が親要素から継承されることを示します)、または「%」と「」を追加します。 px” を特定の値、”em” などの単位に変換します。

さらに、flex 属性には auto (1 1 auto) と none (0 0 auto) という 2 つのショートカット値があります。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
        }
        .flex div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .flex div:nth-child(2) {
            flex:0;
        }
        .flex div:nth-child(4) {
            flex:1 1 auto;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div>あ</div><div>い</div><div>う</div><div>え</div><div>お</div>
    </div>
</body>
</html> 

実行結果は次の図のとおりです。

図: フレックス プロパティのデモンストレーション
図: フレックス プロパティのデモンストレーション

さらに、flex プロパティに加えて、flex-grow、flex-shrink、および flex-basis プロパティを使用して、アイテムの成長、収縮、およびアイテムの長さを設定することもできます。次に例を示します。

 

「 CSS フレックス レイアウト (エラスティック レイアウト / エラスティック ボックス)」についてわかりやすく解説!絶対に観るべきベスト2動画

CSS入門講座 #11:Flexbox(フレックスボックス)でレイアウトを組もう