フレックスボックス-概要

C ascading S tyle S * heets（CSS）は、Webページを表示可能にするプロセスを簡素化するためのシンプルな設計言語です。 CSSは、Webページのルックアンドフィールの部分を処理します。

CSSを使用すると、テキストの色、フォントのスタイル、段落間の間隔、列のサイズとレイアウトの方法、使用する背景画像または色、レイアウトデザイン、さまざまなデバイスのディスプレイのバリエーション、画面サイズを制御できます。その他のさまざまな効果。

CSSで、ボックスの位置と寸法を決定するには、利用可能なレイアウトモードのいずれかを使用することができます-

ブロックレイアウト-このモードはドキュメントのレイアウトに使用されます。
インラインレイアウト-このモードはテキストのレイアウトに使用されます。
テーブルレイアウト-このモードはテーブルのレイアウトに使用されます。
テーブルレイアウト-このモードは、要素の配置に使用されます。

これらのモードはすべて、ドキュメント、テキスト、テーブルなどの特定の要素を揃えるために使用されますが、複雑なWebサイトをレイアウトするための完全なソリューションを提供するものはありません。最初は、フロート要素、配置要素、およびテーブルレイアウト（多くの場合）の組み合わせを使用して行われます。ただし、フロートでは、ボックスを水平方向にのみ配置できます。

Flexboxとは何ですか？

上記のモードに加えて、CSS3は、一般に Flexbox と呼ばれる別のレイアウトモードFlexible Boxを提供します。

このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。フロートとは異なり、Flexboxレイアウトでは、ボックスの方向、配置、順序、サイズを完全に制御できます。

Flexboxの機能

以下は、Flexboxレイアウトの注目すべき機能です-

方向-Webページ上のアイテムは、左から右、右から左、上から下、下から上など、任意の方向に配置できます。
注文-Flexboxを使用して、Webページのコンテンツの順序を並べ替えることができます。
Wrap -Webページのコンテンツに一貫性のないスペースがある場合（単一行）、それらを複数の行（水平方向と垂直方向）にラップできます。
Alignment -Flexboxを使用すると、コンテナに関してWebページのコンテンツを整列できます。
サイズ変更-Flexboxを使用すると、ページ内のアイテムのサイズを使用可能なスペースに合わせて増減できます。

サポートするブラウザー

Flexboxをサポートするブラウザーは次のとおりです。

Chrome 29+
Firefox 28以降
Internet Explorer 11以降
Opera 17+
Safari 6.1以降
Android 4.4以降
iOS 7.1以降

フレックスボックス-フレックスコンテナ

アプリケーションでFlexboxを使用するには、 display プロパティを使用してflexコンテナを作成/定義する必要があります。

使用法-

display: flex | inline-flex

このプロパティは2つの値を受け入れます

flex -ブロックレベルのflexコンテナを生成します。
inline-flex -インラインflexコンテナボックスを生成します。

次に、例で display プロパティを使用する方法を説明します。

Flex

この値を表示プロパティに渡すと、ブロックレベルのフレックスコンテナが作成されます。親コンテナ（ブラウザ）の幅全体を占有します。

次の例は、ブロックレベルのフレックスコンテナを作成する方法を示しています。ここでは、異なる色の6つのボックスを作成しており、それらを保持するためにflexコンテナを使用しました。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

値 flex を display プロパティに指定しているため、コンテナはコンテナ（ブラウザ）の幅を使用します。

これを確認するには、下に示すようにコンテナに境界線を追加します。

.container {
   display:inline-flex;
   border:3px solid black;
}

それは次の結果を生成します-

インラインフレックス

この値を display プロパティに渡すと、インラインレベルのフレックスコンテナが作成されます。コンテンツに必要な場所を取ります。

次の例は、インラインflexコンテナを作成する方法を示しています。ここでは、異なる色の6つのボックスを作成し、それらを保持するためにインラインフレックスコンテナーを使用しました。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

インラインフレックスコンテナを使用しているため、要素をラップするために必要なスペースを使用しました。

フレックスボックス-フレックス方向

*flex-direction* プロパティは、フレックスコンテナ（flex-items）の要素を配置する必要がある方向を指定するために使用されます。

使用法-

flex-direction: row | row-reverse | column | column-reverse

このプロパティは、4つの値を受け入れます-

row -コンテナの要素を左から右に水平に配置します。
row-reverse -コンテナの要素を右から左に水平に配置します。
column -コンテナの要素を左から右に垂直に配置します。
column-reverse -コンテナの要素を右から左に垂直に配置します。

ここで、 direction プロパティの使用を示すためにいくつかの例を取り上げます。

row

この値を direction プロパティに渡すと、以下に示すように、コンテナの要素が左から右に水平に配置されます。

Row Direction.jpg

次の例は、値 row を_flex-direction_プロパティに渡した結果を示しています。ここでは、_flex-direction_値が row の異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

行反転

この値を direction プロパティに渡すと、以下に示すように、コンテナの要素が右から左に水平に配置されます。

Row Reverse.jpg

次の例は、値 row-reverse を_flex-direction_プロパティに渡した結果を示しています。ここでは、_flex-direction_値 row-reverse で異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row-reverse;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

カラム

この値を direction プロパティに渡すと、下に示すように、コンテナの要素が上から下に垂直に配置されます。

Column Direction.jpg

次の例は、値 column を_flex-direction_プロパティに渡した結果を示しています。ここでは、_flex-direction_値 column で異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

列反転

この値を direction プロパティに渡すと、下に示すように、コンテナの要素が下から上に垂直に配置されます。

方向列Reverse.jpg

次の例は、値 column-reverse を_flex-direction_プロパティに渡した結果を示しています。ここでは、_flex-direction_値 column-reverse で異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column-reverse;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスボックス-フレックスラップ

一般的に、コンテナのスペースが不足している場合、以下に示すように残りのフレックスアイテムは非表示になります。

フレックスなしラップ非表示

*flex-wrap* プロパティは、flex-containerが単一行か複数行かを制御するために使用されます。

使用法-

flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse

このプロパティは、次の値を受け入れます-

wrap -スペースが不足している場合、コンテナの要素（flexitems）は上から下に追加のflexラインにラップされます。
wrap-reverse -スペースが不足している場合、コンテナの要素（flex-items）は下から上に追加のflexラインにラップされます。

次に、 wrap プロパティの使用方法と例を示します。

wrap

値 wrap をプロパティ flex-wrap に渡すと、以下のようにコンテナの要素が左から右に水平に配置されます。

ラップ

次の例は、値 wrap を_flex-wrap_プロパティに渡した結果を示しています。ここでは、_flex-direction_値が row の異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

折り返し

値 wrap-reverse をプロパティ flex-wrap に渡すと、以下に示すようにコンテナの要素が左から右に水平に配置されます。

折り返し反転

次の例は、値 wrap-reverse を_flex-wrap_プロパティに渡した結果を示しています。ここでは、_flex-direction_値が row の異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap-reverse;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

ラップ（列）

値 wrap をプロパティ flex-wrap に渡し、値 column をプロパティ flex-direction に渡すと、下に示すようにコンテナの要素が左から右に水平に配置されます。

列の折り返し

次の例は、値 wrap を flex-wrap プロパティに渡した結果を示しています。ここでは、_flex-direction_値 column で異なる色の6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap;
         height:100vh;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

折り返し（列）

値 wrap-reverse をプロパティ flex-wrap に渡し、値 column をプロパティ flex-direction に渡すと、以下に示すように、コンテナの要素が左から右に水平に配置されます。

逆列を折り返す

次の例は、値 wrap-reverse を_flex-wrap_プロパティに渡した結果を示しています。ここでは、異なる色と_flex-direction_値 column を持つ6つのボックスを作成しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap-reverse;
         height:100vh;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

Flexbox-内容の正当化

多くの場合、以下に示すようにフレックスアイテムを配置した後、コンテナ内に余分なスペースが残っています。

プロパティ justify-content を使用すると、余分なスペースを意図したとおりに分配することにより、メイン軸に沿ってコンテンツを整列できます。また、flexitemsが行をオーバーフローする場合に備えて、flexitemsの配置を調整できます。

使用法-

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

このプロパティは、次の値を受け入れます-

flex-start -flex-itemsはコンテナの先頭に配置されます。
flex-end -flex-itemsはコンテナの最後に配置されます。
center -flex-itemsはコンテナの中央に配置され、余剰スペースはflex-itemsの最初と最後に均等に分配されます。
space-between -追加のスペースはflex-item間に均等に分配されます。
space-around -余分なスペースは、コンテナとその内容物の間のスペースがflex-item間のスペースの半分になるようにflexアイテム間に均等に分配されます。

ここで、justify-contentプロパティの使用方法と例を示します。

フレックススタート

この値をプロパティ justify-content に渡すと、フレックスアイテムはコンテナの先頭に配置されます。

Justify Flex Start

次の例は、値 flex-start を justify-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスエンド

この値をプロパティ justify-content に渡すと、フレックスアイテムはコンテナの最後に配置されます。

フレックスエンドの調整

次の例は、値 flex-end を justify-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-end;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

センター

この値をプロパティ justify-content に渡すと、flex-itemsがコンテナの中心に配置され、余分なスペースがflex-itemsの開始時と終了時に均等に分配されます。

フレックスセンターの調整

次の例は、値 center を justify-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:center;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

スペース間

この値をプロパティ justify-content に渡すと、2つのflexアイテム間のスペースが同じになり、flexアイテムの開始と終了がの端に触れるように、余分なスペースがflexアイテム間に均等に分配されます。コンテナ。

フレックススペースの調整

次の例は、値 space-between を justify-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-between;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

スペースアラウンド

この値をプロパティ justify-content に渡すと、任意の2つのflex-item間のスペースが同じになるように、余分なスペースがflex-item間に均等に分配されます。ただし、コンテナの端とその内容（フレックス項目の開始と終了）の間のスペースは、フレックス項目間のスペースの半分です。

Justify Flex Space Around

次の例は、値 space-around を justify-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-around;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

スペース均等

この値をプロパティ justify-content に渡すと、2つのflexアイテム間のスペースが同じになるように、余分なスペースがflexアイテム間に均等に分配されます（端までのスペースを含む）。

Flexスペースを均等に揃える

次の例は、値 space-evenly を justify-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスボックス-アイテムの整列

*align-items* プロパティは、*コンテンツの正当化*と同じです。 しかし、ここでは、アイテムはクロスアクセス全体にわたって（垂直に）並べられました。

使用法-

align-items: flex-start | flex-end | center | baseline | stretch;

このプロパティは、次の値を受け入れます-

flex-start -フレックスアイテムはコンテナの上部に垂直に配置されました。
flex-end -フレックスアイテムはコンテナの下部に垂直に配置されました。
flex-center -flexアイテムはコンテナの中央に垂直に配置されました。
ストレッチ-フレックスアイテムは、コンテナの垂直方向のスペース全体を埋めるように垂直方向に配置されました。
baseline -フレックス項目は、テキストのベースラインが水平線に沿って整列するように配置されました。

フレックススタート

この値をプロパティalign-itemsに渡すと、フレックスアイテムはコンテナの上部に垂直に配置されました。

整列開始

次の例は、値 flex-start を align-items プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスエンド

この値をプロパティ align-items に渡すと、フレックスアイテムはコンテナの下部に垂直に配置されます。

端を揃える

次の例は、値 flex-end を align-items プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-end;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

センター

この値をプロパティ align-items に渡すと、flex-itemsはコンテナの中央に垂直に配置されます。

中央揃え

次の例は、値 flex-center を align-items プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:center;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

ストレッチ

この値をプロパティ align-items に渡すと、flex-itemsは垂直方向に整列され、コンテナの垂直方向のスペース全体を埋めます。

Align Stretch

次の例は、値 stretch を align-items プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:stretch;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

ベースライン

この値をプロパティ align-items に渡すと、テキストのベースラインが水平線に沿って整列するようにflex-itemsが整列されます。

次の例は、値 baseline を align-items プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:baseline;
      }
   </style>

   <body>
      <div class = "container">
      <div class = "box box1">One</div>
      <div class = "box box2">two</div>
      <div class = "box box3">three</div>
      <div class = "box box4">four</div>
      <div class = "box box5">five</div>
      <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスボックス-コンテンツの整列

flex-containerに複数の行がある場合（flex-wrap：wrapの場合）、align-contentプロパティはコンテナ内の各行の配置を定義します。

使用法-

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

このプロパティは、次の値を受け入れます-

stretch -コンテンツの行は残りのスペースを埋めるために伸びます。
flex-start -コンテンツ内のすべての行はコンテナの開始時にパックされます。
flex-end -コンテンツ内のすべての行はコンテナの最後に詰め込まれます。
center -コンテンツ内のすべての行はコンテナの中央に詰められます。
space-between -余分なスペースは行間に均等に配分されます。
space-around -余分なスペースは、各行（最初と最後の行を含む）の周りに等しいスペースで均等に行間に分配されます

センター

この値をプロパティ align-content に渡すと、すべての行がコンテナの中央に詰められます。

Flex Align Content-Center

次の例は、値 center を align-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックススタート

この値をプロパティ align-content に渡すと、すべての行がコンテナの開始時にパックされます。

Flex Align Content-Start

次の例は、値 flex-start を align-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスエンド

この値をプロパティ align-content に渡すと、すべての行がコンテナの最後に詰められます。

Flex Align Content-End

次の例は、値 flex-end を align-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

ストレッチ

この値をプロパティ align-content に渡すと、行が伸びて残りのスペースがいっぱいになります。

Flex Align Content-Stretch

次の例は、 align-content プロパティに値 stretch を渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

スペースアラウンド

この値をプロパティ align-content に渡すと、余分なスペースが行間に均等に配分され、各行（最初と最後の行を含む）の周りに等しいスペースが配置されます。

Flex Align Content-Space Around

次の例は、値 space-around を align-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

スペース間

この値をプロパティ align-content に渡すと、余分なスペースが行間に均等に配分されます。最初の行はコンテナの一番上にあり、最後の行はコンテナの一番下にあります。

Flex Align Content-Space Between

次の例は、値 space-between を align-content プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}

      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスボックス-フレックスオーダー

*flex-order* プロパティは、フレックスボックスアイテムの順序を定義するために使用されます。

次の例は、 order プロパティを示しています。ここでは、ラベルが1つ、2つ、3つ、4つ、5つ、6つあり、同じ順序で配置された6つの色付きのボックスを作成しています。フレックスオーダーのプロパティ。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:1}
      .box4{background:magenta; order:2}
      .box5{background:yellow;}
      .box6{background:pink;}

      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:rows;
         flex-wrap:wrap;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

-注文

以下に示すように、–ve値をオーダーに割り当てることもできます。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:-1}
      .box4{background:magenta; order:-2}
      .box5{background:yellow;}
      .box6{background:pink;}

      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

Flexbox-柔軟性

フレックスベース

*flex-basis* プロパティを使用して、スペースが分配される前にflex-itemのデフォルトサイズを定義します。

次の例は、flex-basisプロパティの使用方法を示しています。ここでは、3つの色付きボックスを作成し、サイズを150ピクセルに固定しています。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}

      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックス成長

*flex-grow* プロパティを使用して *flex-grow* 係数を設定します。 コンテナ内に余分なスペースがある場合、特定のflex-itemがどれだけ成長するかを指定します。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }

      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックス収縮

flex shrink-factor の設定にはflex-shrinkプロパティを使用します。コンテナ内に十分なスペースがない場合、フレックスアイテムをどのくらい縮小するかを指定します。

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}

      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

flex

これら3つのプロパティすべてに値を一度に設定するための略記があります。 flex と呼ばれます。このプロパティを使用して、値をflex-grow、flex-shrink、およびflex-basisの値に一度に設定できます。このプロパティの構文は次のとおりです。

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

フレックスボックス-自己整列

このプロパティは align-items と似ていますが、ここでは個々のflexアイテムに適用されます。

使用法-

align-self: auto | flex-start | flex-end | center | baseline | stretch;

このプロパティは、次の値を受け入れます-

flex-start -flexアイテムはコンテナの上部に垂直に配置されます。
flex-end -フレックスアイテムは、コンテナの下部に垂直に配置されます。
flex-center -フレックスアイテムはコンテナの中央に垂直に配置されます。
ストレッチ-フレックスアイテムは、コンテナの垂直方向のスペース全体を埋めるように垂直方向に配置されます。
baseline -フレックスアイテムは、交差軸のベースラインに配置されます。

フレックススタート

この値をプロパティalign-selfに渡すと、特定のflex-itemがコンテナの上部に垂直に配置されます。

Flex Align Self Start

次の例は、値 flex-start を align-self プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

フレックスエンド

この値をプロパティ align-self に渡すと、特定のflex-itemがコンテナの下部に垂直に配置されます。

Flex Align Self End

次の例は、値 flex-end を align-self プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

センター

値 center をプロパティ align-self に渡すと、特定のflex-itemがコンテナの中心に垂直に配置されます。

Flex Align Self Center

次の例は、値 center を align-self プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

ストレッチ

この値をプロパティ align-self に渡すと、特定のflexアイテムはコンテナの垂直方向のスペース全体を埋めるように垂直方向に配置されます。

Flex Align Self Stretch

次の例は、値stretchを align-self プロパティに渡した結果を示しています。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>

   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

それは次の結果を生成します-

Flexbox-quick-guide

フレックスボックス-概要

Flexboxとは何ですか？

Flexboxの機能

サポートするブラウザー

フレックスボックス-フレックスコンテナ

Flex

インラインフレックス

フレックスボックス-フレックス方向

row

行反転

カラム

列反転

フレックスボックス-フレックスラップ

wrap

折り返し

ラップ（列）

折り返し（列）

Flexbox-内容の正当化

フレックススタート

フレックスエンド

センター

スペース間

スペースアラウンド

スペース均等

フレックスボックス-アイテムの整列

フレックススタート

フレックスエンド

センター

ストレッチ

ベースライン

フレックスボックス-コンテンツの整列

センター

フレックススタート

フレックスエンド

ストレッチ

スペースアラウンド

スペース間

フレックスボックス-フレックスオーダー

-注文

Flexbox-柔軟性

フレックスベース

フレックス成長

フレックス収縮

flex

フレックスボックス-自己整列

フレックススタート

フレックスエンド

センター

ストレッチ