flex box サンプル

　ここでは、flex box の幾つかのプロパティを実際に表示してみました 　参考１ 　参考２ 　参考３

■ justify-content

　　要素横幅(高さ)の合計が、フレックスコンテナの横幅(高さ)に満たない場合の余白表示方法を指定します。
値説　明
flex-start（初期値)水平(並べ方向)の配置をコントロール。flex-startは、先頭側揃えで子要素を配置。
flex-end右(末尾側)揃えで子要素を配置。flex-startの逆
center並べ方向の中央に子要素を配置。
space-between最初と最後の子要素は、コンテナの両端に余白なしで配置し、子要素間に均等に余白を配置
space-around各子要素の両脇余白を同じに配置。隣接間隔は両端余白の倍になる。
space-evenly隣接間隔、最初の余白、最後の余白を同じ幅に配置。

CSS
 .flexbox{ display:flex; padding:3px; border:1px solid #999; background:#ddd; }
   .boxA, .boxB, .boxC, .boxD, .boxE{ border:1px solid #999; text-align:center; }
   .boxA{ background:#fcc; width:150px; min-height:20px; }
   .boxB{ background:#cfc; min-width:50px; min-height:40px; }
   .boxC{ background:#ccf; width:100px; height:25px; }
   .boxD{ background:#ffc; width:250px; min-height:15px; }
   .boxE{ background:#cff; width:80px; height:15px; }
   .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; }
   .space-evenly{ justify-content:space-evenly; }
HTML
 <h5>flex-start</h5>
 <div class="flexbox flex-start">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>flex-end</h5>
 <div class="flexbox flex-end">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>center</h5>
 <div class="flexbox center">
 <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>space-between</h5>
 <div class="flexbox space-between">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>space-around</h5>
 <div class="flexbox space-around">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>space-evenly</h5>
 <div class="flexbox space-evenly">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
サンプル
flex-start
A
B
C
D
E
flex-end
A
B
C
D
E
center
A
B
C
D
E
space-between
A
B
C
D
E
space-around
A
B
C
D
E
space-evenly
A
B
C
D
E

■ align-items

　　要素配列方向に交叉方向の表示位置を指定します。＊align-items は親要素で指定し、align-self は個々の子要素毎に指定します。
値説　明
stretch（初期値）高さ(幅)を揃えて並べる。親要素の高さ(幅)か一番大きい子要素の高さ(幅)に合わせて配置します。
flex-start子要素の上側(左側)を揃えて表示開始位置から並べる
flex-end子要素の下側(右側)を揃えて表示開始位置から並べる
center親要素の中央位置に子要素を並べる
baseline子要素の文字のベースラインを揃えて並べる

CSS
 .flexbox{ display:flex; padding:3px; border:1px solid #999; background:#ddd; }
   .boxA, .boxB, .boxC, .boxD, .boxE{ border:1px solid #999; text-align:center; }
   .boxA{ background:#fcc; width:150px; min-height:20px; }
   .boxB{ background:#cfc; min-width:50px; min-height:40px; }
   .boxC{ background:#ccf; width:100px; height:25px; }
   .boxD{ background:#ffc; width:250px; min-height:15px; }
   .boxE{ background:#cff; width:80px; height:15px; }
   .stretch{ align-items:stretch; }
   .flex-start{ align-items:flex-start; }
   .flex-end{ align-items:flex-end; }
   .center{ align-items:center; }
   .baseline{ align-items:baseline; }
HTML
 <h5>stretch</h5>
 <div class="flexbox stretch">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>flex-start</h5>
 <div class="flexbox flex-start">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>flex-end</h5>
 <div class="flexbox flex-end">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>center</h5>
 <div class="flexbox center">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>baseline</h5>
 <div class="flexbox baseline">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
サンプル
stretch
A
B
C
D
E
flex-start
A
B
C
D
E
flex-end
A
B
C
D
E
center
A
B
C
D
E
baseline
A
B
C
D
E

■ align-content

　　要素配列方向に交叉方向の余白の表示方法を指定します。
値説　明
stretch（初期値）stretchは親要素の高さ(幅)又は一番大きい子要素に合わせて余白を無くします
flex-start子要素を上部に寄せて並べて、下部に余白を残す
flex-end子要素を下部に寄せて並べて、上部に余白を残す
center子要素を交叉方向中央に配置する。
space-between交叉方向両端に沿って子要素を並べ、交叉方向の余白を子要素列間に均等に配置
space-around交叉方向余白を子要素列間及び交叉両端に均等に配置

CSS
.flexbox{ display:flex; padding:3px; border:1px solid #999; background:#ddd; flex-wrap:wrap; width:500px; height:80px; }
  .boxA, .boxB, .boxC, .boxD, .boxE{ border:1px solid #999; text-align:center; }
  .boxA{ background:#fcc; width:150px; min-height:20px; }
  .boxB{ background:#cfc; min-width:50px; min-height:40px; }
  .boxC{ background:#ccf; width:100px; height:25px; }
  .boxD{ background:#ffc; width:250px; min-height:15px; }
  .boxE{ background:#cff; width:80px; height:15px; }
  .stretch{ align-content:stretch; }
  .flex-start{ align-content:flex-start; }
  .flex-end{ align-content:flex-end; }
  .center{ align-content:center; }
  .space-between{ align-content:space-between; }
  .space-around{ align-content:space-around; }
HTML
 <h5>stretch</h5>
 <div class="flexbox stretch">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>flex-start</h5>
 <div class="flexbox flex-start">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>flex-end</h5>
 <div class="flexbox flex-end">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>center</h5>
 <div class="flexbox center">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>space-between</h5>
 <div class="flexbox space-between">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
 <h5>space-around</h5>
 <div class="flexbox space-around">
   <div class="boxA">A</div><div class="boxB">B</div><div class="boxC">C</div><div class="boxD">D</div><div class="boxE">E</div>
 </div>
サンプル
stretch
A
B
C
D
E
flex-start
A
B
C
D
E
flex-end
A
B
C
D
E
center
A
B
C
D
E
space-between
A
B
C
D
E
space-around
A
B
C
D
E

■ 参考サイト

justify-content 　align-items 　align-content