flex box
　Web ページのレイアウトには、初期のころは table タグが使用されていました。CSS の時代になると、float:left と clearfix を用いられるようになりました。CSS3 になってフレキシブルボックスを使えるようになりました。今後はフレキシブルボックスが主流になると思われます。
　フレキシブル（伸縮可能）ボックスでは、フレックスコンテナに display:flex を指定することでフレックスアイテムをボックス空間を埋めるように大きくしたり、コンテナからはみ出さないように縮めたりできて、上下左右に自由にレイアウトすることが出来ます。

■ 基本事項

　フレキシブルボックスの具体的な利用方法を以下に記します
　　1. フレックスコンテナに display:flex 又は display:inline-flex を指定し、フレックスアイテム等に各属性を指定します。 
      【HTML】
<div class="f-container">
  <div class="f-item1">A</div>
  <div class="f-item2">B</div>
  <div class="f-item3">C</div>
</div>
        【CSS】
.f-container{display:flex; height:40px;}/* flexbox枠を指定 */
.f-item1{flex:0 40px; background:#fcc;} /* 伸長せず 幅指定 */
.f-item2{flex:0 20px; background:#cfc;} /* 伸長せず 幅指定 */
.f-item3{flex:0 80px; background:#ccf;} /* 伸長せず 幅指定 */
　　【左記の表示】
A
B
C
　　＊flex 属性は、flex-grow(余白伸長),flex-shrink(過幅縮短),flex-basis(幅)を纏めて指定出来ます。 default値は[ 0 1 auto ]です。

　　2. 属性は、flexコンテナ(親要素)に指定するものと、flexアイテム(子要素)に指定するものが有ります。参考１ 　参考２
　　　【フレックスコンテナ(親要素)に指定】　サンプル
プロパティ値説　明
flex-direction
(要素の方向)		row（初期値）子要素を左から右に配置する。(水平方向)
row-reverse子要素を右から左に配置する。rowの逆。
column子要素を上から下に配置。(垂直方向)
column-reverse子要素を下から上に配置。columnの逆。
flex-wrap
(要素の折返し)		nowrap（初期値）子要素を左から右(並べ方向)へと配置する。折り返しは行わない。
wrap子要素をコンテナ幅内で折り返して並べる。
wrap-reverse子要素を折り返する際、上側(左側)に改行
flex-flow (一括設定)flex-direction と flex-wrap をまとめて書くことができる。例:「flex-flow: row wrap;」
justify-content
(主軸方向の配置)		flex-start (初期値)主軸(並べ方向)配置をコントロール。flex-startは、先頭側揃えで子要素を配置。
flex-end右(末尾側)揃えで子要素を配置。flex-startの逆
center主軸方向の中央に子要素を配置。
space-between最初と最後の子要素は、コンテナの両端に余白なしで配置し、子要素間に均等に余白を配置
space-around各子要素の両脇余白を同じに配置。隣接間隔は両端余白の倍になる。
space-evenly隣接間隔、最初の余白、最後の余白を同じ幅に配置。
align-items
(交叉位置の指定)		stretch（初期値）高さ(幅)を揃えて並べる。親要素の高さ(幅)か一番大きい子要素の高さ(幅)に合わせて配置。align-items は親要素で指定し、align-self は個々の子要素ごとに指定。
flex-start子要素の上側(左側)を揃えて表示開始位置から並べる
flex-end子要素の下側(右側)を揃えて表示開始位置から並べる
center親要素の中央位置に子要素を並べる
baseline子要素の文字のベースラインを揃えて並べる
align-content
(交叉軸周り処理)		stretch（初期値）align-contentは交叉軸周りの余白を処理する。
stretchは親要素の高さ(幅)又は一番大きい子要素に合わせて余白を無くす
flex-start子要素を上部に寄せて並べて、下部に余白を残す
flex-end子要素を下部に寄せて並べて、上部に余白を残す
center子要素を交叉方向中央に配置する。
space-between交叉方向両端に沿って子要素を並べ、交叉方向の余白を子要素列間に均等に配置
space-around交叉方向余白を子要素列間及び交叉両端に均等に配置
place-*
(両方向揃え)		place-contentalign-content および justify-content を一度に指定出出来る。(flex や grid のレイアウトで有効)
place-itemsalign-items および justify-items を一度に指定出出来る。(flex や grid のレイアウトで有効)
place-selfalign-self および justify-self を一度に指定出出来る。(flex や grid のレイアウトで有効)
gap
(間隔制御)		（初期値=0）row-gapの値と、column-gapの値をスペースを空けて記載しなります。 2番目を省略すると、1,2番目が同じとなります。例: gap: 5px 10px;
row-gap要素のグリッド行の間のみの間隔を定義します。
column-gap要素のグリッド列の間のみの間隔を定義します。

　　　【フレックスアイテム(子要素に設置)】
プロパティ値説　明
order (要素の順番)子要素の順番をHTMLの順番に関わらず変更できる。初期値は0。
flex-grow (要素の伸張)要素の配置後、親要素に余白がある場合、flex-growを設定した子要素の伸長係数に従い、子要素の横幅が伸長されます。マイナス値は無効。
flex-shrink (要素の短縮)flex-growと逆に、親要素に全ての子要素が入り切らない場合、flex-shrinkを指定した子要素が設定数値比率で短縮。マイナス値は無効。
flex-basis (要素の幅)widthプロパティと同じように幅(高さ)の値(パーセンテージやピクセル値)を指定して配置。
flex (一括設定)「flex-grow」,「flex-shrink」,「flex-basis」の3つを一括指定。初期値は「flex: 0 1 auto;」
align-self
(交叉位置の指定)		auto（初期値）交叉軸の整列制御を，親要素の align-items の値に委ねる。
stretch高さ(幅)を揃えて並べる。親要素の高さ(幅)か一番大きい子要素の高さ(幅)に合わせて配置。
flex-start子要素の上側(左側)を揃えて表示開始位置から並べる
flex-end子要素の下側(右側)を揃えて表示開始位置から並べる
center親要素の中央位置に子要素を並べる
baseline子要素の文字のベースラインを揃えて並べる

　　3. フレックスコンテナに display:flex 又は display:inline-flex を指定し、flex-flow などを指定する例。↓
プロパティ順行-折返し順列-折返し行逆-折返し逆列-折返し順行-上方折返順行-折返し無逆列-折返し無
flex-direction:rowcolumnrow-reversecolumn-reverserowrowcolumn-reverse
flex-wrap:wrapwrapwrapwrapwrap-reversenowrapnowrap
  (flex-flow:)
で記述すると		row wrapcolumn wraprow-reverse
wrap		column-reverse
wrap		row
wrap-reverse		row
nowrap		column-reverse
nowrap
表示例
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4

　　4. フレックスコンテナ(flex-flow:)に加え、さらに別のプロパティを指定した例。↓
均等間隔(横)中央(横)配置中央(縦)配置ベースライン中心揃え下部に表示中心に表示
justify-content:space-between;center;center;
align-items: baseline;center;
align-content: flex-endcenter;
 同時指定
 (flex-flow:)		row wraprow wrapcolumn wraprow-reverse
wrap		row-reverse
wrap		row-reverse
wrap		row
wrap
表示例
1
2
3
1
2
3
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4

表示順指定表示順指定表示順指定アイテムの
下側揃え		アイテムの
下側揃え		アイテムの
中心揃え
order:3 1 4 23 1 4 23 1 4 2
align-self: flex-end;flex-end;center;
 同時指定
 (flex-flow:)		row
wrap		column
wrap		row-reverse
wrap		row
wrap		row
nowrap		row
wrap
表示例
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4

　　5. flex-grow(余白伸長),flex-shrink(過幅縮短),flex-basis(幅)の例。↓
flex-grow:(値);flex-grow:(値);flex-shrink:(値);flex-basis:(幅);flex-basis:(幅);flex-basis:content;
機能幅(高さ)伸長係数幅(高さ)伸長係数幅(高さ)圧縮係数幅(高さ)指定幅(高さ)指定幅(高さ)に対応
例値1 2 3 11 2 3 11 2 3 210px 20px 30px 40px50px 20px 30px 40px(1111, 22, 333, 4)
同時指定flex-direction:row;flex-direction:
column;		flex-direction:row;flex-flow:
row nowrap;		flex-flow:row wrap;flex-direction:
row-reverse;
表示例
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1111
22
333
4

■ フレックスボックスの例

　【レイアウトサンプル－１】
　ブロックを上下左右に並べてみます
<!DOCTYPE html>  
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" />
  <title>フレキシブルページ 02</title>
  <style>
      .lavel { text-align:center; padding-top:20px; font-weight:bold; }
      .flex-f { 
        width:720px; margin:5px auto; padding:6px 2px;
        background:#ee9; text-align:center;
        display:flex; flex-flow:row wrap;
      }
      .flex-r { 
        width:720px; margin:5px auto; padding:6px 2px;
        background:#ee9; text-align:center;
        display:flex; flex-flow:row-reverse wrap-reverse;
      }
      .flex-c { 
        width:720px; height:130px; margin:5px auto; padding:6px 2px;
        background:#ee9; text-align:center;
        display:flex; flex-flow:column wrap;
      }
      .item { 
        width:172px; padding:2px; background:#9e9; 
        border:solid 2px #66c; border-radius:5px;
      }
  </style>
</head>
<body>
  <div class="lavel">横順方向で下方に並べる</div>
  <div class="flex-f">
    <div class="item">
      <p>フレックスアイテム １</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ２</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ３</p>
      一箇所大きなアイテムがあると、隣も合わせて調整します
    </div>
    <div class="item">
      <p>フレックスアイテム ４</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ５</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ６</p>
    </div>
  </div>
  
  <div class="lavel">横逆方向で上方に並べる</div>
  <div class="flex-r">
    <div class="item">
      <p>フレックスアイテム １</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ２</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ３</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ４</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ５</p>
      この隣も調整されます
    </div>
    <div class="item">
      <p>フレックスアイテム ６</p>
    </div>
  </div>
  
  <div class="lavel">上下方向に並べる</div>
  <div class="flex-c">
    <div class="item">
      <p>フレックスアイテム １</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ２</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ３</p>
      整列方向寸法で調整されます
    </div>
    <div class="item">
      <p>フレックスアイテム ４</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ５</p>
    </div>
    <div class="item">
      <p>フレックスアイテム ６</p>
    </div>
  </div>
</body>
</html>


　【レイアウトサンプル－２】
　簡単なレイアウトサンプルです
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" />
  <title>Flexbox sample 13</title>
  <style>
    body { font: 24px Helvetica; background: #999; }
    header, footer{ margin:4px; padding:5px; min-height:44px; border-radius:7px; background:#feb; }
    .top-nav { display:flex; justify-content:center; font-size:14px; background: #eef; margin:4px; border-radius:7px; }
    .top-nav a { margin:5px 10px; border-radius:5px; background:#6B9;
            color:#fff; display:block; padding:10px 15px; text-decoration:none; }
    .top-nav li { list-style-type:none; position:relative; left:-1.5em; }
    .top-nav li:first-child { margin-right: auto; }
    .top-nav .logo { background: #99f; padding:0px; width:88px;height:34px; }
    .top-nav .logo img { position:relative; width:100px; height:36px; }
    .main { min-height:300px; margin:0px; padding:0px; display:flex; flex-flow:row; }
    .main > article{ margin:4px; padding:5px;
                    border-radius:7px; background:#dd8; flex:3; order:2; }
    .main > nav{ margin:4px; padding:5px; border:1px solid #88b; border-radius:7px;
                background: #ccccff; flex:1; order:1; }
    .main >nav ul{ font-size:14px; list-style-type:none; }
    .main >nav li { list-style-type:none; position:relative; left:-2em; }
    .main >nav a { margin:5px 10px; border-radius:5px; background:#6c9;
            color:#eee; display:block; padding:5px; text-decoration:none; }
    .main > aside{ margin:4px; padding:5px; border:1px solid #88b; border-radius:7px;
                  background: #ccf; flex:1; order:3; }
    .main > aside p{ font-size:14px; }              
    .main .contents { display:flex; justify-content:center; align-items:center; }
    .main .contents .align { width:300px; height:150px; font-size:14px; padding:8pt; border-radius:7px; background:#F5F0CF; }
  </style>
</head>
<body>
  <header>header</header>
  <ul class="top-nav">
      <li><a href="../../../index.html" class="logo"><img src="LOyuki14.gif" ></a></li>
      <li><a href="http://www.webcreatorbox.com/tech/flexbox/" target="_blank">Menu 1</a></li>
      <li><a href="http://qiita.com/takanorip/items/a51989312160530d89a1" target="_blank">Menu 2</a></li>
      <li><a href="https://web-designer.cman.jp/css_ref/abc_list/flexbox/" target="_blank">Menu 3</a></li>
      <li><a href="http://www.tohoho-web.com/css/prop/flex.htm" target="_blank">Menu 4</a></li>
  </ul>
  <div class="main">
    <nav>side-nav
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
    <article class="contents">
      <div class="align">
        このアイテムは、中央枠に justify-content:center; align-items:center; によって、左右、上下の中央に配置
      </div>
    </article>
    <aside>aside
      <p>
        この横３枠の並びは<br>flex: と order: で配置
      </p>
    </aside>
  </div>
  <footer>footer</footer>
</body>
</html>


　【レイアウトサンプル－３】
　タブ切替をする構成のサンプルです
<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .area { width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; } 
    .label_class {
      width: calc(100% / 5 - 4px); margin:2px 2px 0px 2px; border-radius:12px 12px 0 0;
      border-bottom:2px #aaa solid; background: #ccc; height: 34px; display: block;
      line-height: 40px; font-size: 15px; text-align: center; order: -1;
    } 
    .label_class:hover { background-color: #ddd; }
    input[name="tab_name"] { display: none; } 
    input:checked + .label_class { background: #f3f3f3; border-bottom:3px #f3f3f3 solid; } 
    .content_class { background:#f3f3f3; height:400px; overflow:auto;
      display: none; padding:1rem; width: 100%; }
    input:checked + .label_class + .content_class { display: block; }
  </style>
</head>
<body>
  <div class="area">
    <input type="radio" name="tab_name" id="tab1" checked>
    <label class="label_class" for="tab1">【タブ１】</label>
    <div class="content_class">
      【タブ１】【タブ２】【タブ３】【タブ４】の<br>
       タブをクリックすれば、その項目が表示されます。<br>
    </div>
    <input type="radio" name="tab_name" id="tab2" >
    <label class="label_class" for="tab2">【タブ２】</label>
    <div class="content_class">
      【タブ２】
    </div>
    <input type="radio" name="tab_name" id="tab3" >
    <label class="label_class" for="tab3">【タブ３】</label>
    <div class="content_class">
      【タブ３】
    </div>
    <input type="radio" name="tab_name" id="tab4" >
    <label class="label_class" for="tab4">【タブ４】</label>
    <div class="content_class">
      【タブ４】
    </div>
  </div>
</body>
</html>


　「フレキシブルボックス」を利用してサンプルページを作って見てみます。
　次の例は、以下の例は、PC用には行方向に並べた枠を、表示要素の幅が 400px以下の表示枠では列方向に並べるようにし、合わせて３番目の項目を先頭にするようにしています。

リスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>レスポンシブ Webページ</title>
  <style>
      .samp-flex { 
        width:98%; margin:0 auto; padding:2px;
        background:#eee; text-align:center;
        display:flex;
        flex-flow:row wrap;
      }
      .samp-item { 
        width:80px; margin:5px; padding:5px;
        background:#9e9; border-radius:5px;
      }
      .samp-item:nth-child(3) { background:#99e; }
      /* 以下でレスポンシブ適用 */
      @media screen and (max-width:400px){ 
        .samp-flex { width:150px; flex-direction: column; }
        .samp-item:nth-child(3) { order: -1; }
      }
  </style>
</head>
<body>
  <div class="samp-flex">
    <div class="samp-item">1</div>
    <div class="samp-item">2</div>
    <div class="samp-item">3</div>
    <div class="samp-item">4</div>
    <div class="samp-item">5</div>
    <div class="samp-item">6</div>
    <div class="samp-item">7</div>
  </div>
</body>
</html>

解説

　この例は、表示要素の幅が 400px以下とそれ以上の場合とで切り替えています
( 1行目)　このレスポンシブ Webページは、HTML5 上で展開します
( 8行目)　class=samp-flex のブロック内をフレックスコンテナとして使うこととします。参考
(11行目)　そのためこのブロックをフレックスコンテナとすることを、display:flex; と記述します
(12行目)　このフレックスアイテムは行方向に並べ、領域内で折り返しをすることを、flex-flow:row wrap; と記述します
(14行目)　.samp-item がこの場合のフレックスアイテムです
(18行目)　.samp-item の 3番目の背景色を #99eにしました
(20行目)　表示要素の幅が 400px以下の場合の CSS を指定します
(21行目)　表示幅が 400px以下の場合、コンテナの幅を 150px とし、フレックスアイテムは列方向に並べるよう指定しました
(22行目)　表示幅が 400px以下の場合、.samp-item の 3番目を最初に配置するようにしました

表示-幅広時

表示-幅狭時

■ レスポンシブ Webページの作成

　以上のように「レスポンシブ Webページ」は、文章構造化されたページに、CSS の メディアクエリを使って条件に応じて表示を変えます。
　その基本的なステップの概要とその参考サイトを下記に示します。
  1. レスポンシブの設計 適用する条件や、対象要素のレイアウトを設計します
  2. ブレークポイントの決定 CSSファイルを切り替え条件(表示幅値など)を決めます
  3. 文章を構造化する(CSSを適用しやすいように、文章等を構造化します)
  4. メディアクエリでCSSを切替 (メディアタイプに応じて適したスタイルシートを適用する)
  5. viewportの設定 viewportとは 　Webデザイン 　viewport 設定 　ちゃんと理解する

■ レスポンシブ Web 関連リファレンス

■ 参考サイト