8.flexbox　編

     flex box はCSS によるレイアウトモデルの事で flex boxの基本構造は２種類の主軸。　縦方向(column) と横方向(row)。
それぞれに順方向と逆方向の並び順を加えると４種類の基本モデルで構成されますが、基本となる親要素(親コンテナ)と子要素(アイテム)の構造は入れ子が可能な為、より複雑な組み合わせが可能となります。
   近年のブラウザーの殆どは対応していますが、少し以前のブラウザーには未対応の物が有る為「ベンダープレフィックス」(※-webkit--ms-等)の付与が必要でしたが、現在ではこれも解消されつつある様です。

[基本構成は以下の通り]※詳しくは前述「mozilla MDN Web Docs 解説ページ」をご参照ください。
   <親要素の記述>
display: flex;   flex box の宣言句
flex-direction: column(又は row);   子要素の並ぶ向き 垂直 or 水平
flex-wrap: wrap(又は wrap-reverse / nowrap);   子要素の折り返し  順方向 / 逆方向 / 折り返し無し
justify-content: flex-start(又は flex-end / center / space-between / space-around);   子要素の水平方向の揃え方 
align-items: flex-start(又は flex-end / center / start / end 等);   子要素の垂直方向の揃え方
align-content: start(又は center / end / flex-start / flex-end 等 );  子要素の垂直方向の分布

   <子要素の記述>
order: 0;  配置順序(0～)
flex: 0 1 auto;   伸びる比率 / 縮む比率 / ベース幅
align-self: auto;   垂直方向の揃え

DEMOページでは、基本の親要素(div id="container")に対して２つの子要素[box_A]と[box_B]を水平方向に配置(@media によって 1440px 以下では垂直方向に変更)し、更に[box_A]と[box_B]内に子要素[DEMOの解説では孫要素と記しています]を各水平方向と垂直方向に配置しています。
ブラウザーの水平方向(画面幅)をフレキシブルに変更しながら挙動を確認してみてください。
親要素並びに子要素のサイズを、固定指定・パーセント指定・カルク(calc)を使用した複合指定を利用する事で、更に自由度は増します。
先ずは基本形のレイアウトで試してみましょう。

※ ベンダープレフィックス についての参考例(項目によって若干記述が異なります)
    display: flex;  =
    display: -ms-flexbox; 
    display: -webkit-flex;

    flex-direction: column;  =
    -ms-flex-direction: column;
    -webkit-flex-direction: column;  

    flex-wrap: nowrap;  =
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap; 

    justify-content: flex-start;  = 
    -ms-flex-pack: start;  
    -webkit-justify-content: flex-start;

    align-content: stretch;  = 
    -ms-flex-line-pack: stretch; 
    -webkit-align-content: stretch; 
 
    align-items: center;  = 
    -ms-flex-align: center;  
    -webkit-align-items: center;

    order: 0;  = 
    -ms-flex-order: 0; 
    -webkit-order: 0;

    flex: 0 0 auto;  = 
    -ms-flex: 0 0 auto;  
    -webkit-flex: 0 0 auto;

    align-self: auto;  = 
    -ms-flex-item-align: auto; 
    -webkit-align-self: auto;