CSS　Flexbox

学んだことを忘れないように備忘録として残しています。

基本的な書き方

　Flexコンテイナーと呼ばれる親要素にFlexアイテムと呼ばれる
　子要素を入れてHTMLは完了。

<div class="container">　
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
  <div class="item5">item5</div>
</div>

　Flexboxを使って子要素を横並びにするには、親要素に display: flex;を 指定するだけOK。

.container {
  display: flex;
}

.container {　　　
  display: inline-flex;　　/* インライン要素に使う場合*/
}

親要素（Flexコンテイナー)に指定するプロパティ

　　flex-direction....子要素の並ぶ向き

.container{
  display:flex;
  flex-direction: row; /* 初期値　左から右に配置*/
  flex-direction: row-reverse;/*右から左に配置*/
  flex-direction: column;/*上から下に配置*/
  flex-direction: column-reverse;/*下からうちに配置*/

}

　　flex-wrap....子要素の折返し

.container{
  display:flex;
  flex-wrap: nowwrap; /* 初期値　子要素を折り返しせず一行に並べる*/
  flex-wrap: wrap; /* 子要素を折り返し複数行に上から下へ並べる*/
  flex-wrap: wrap-wrap-reverse; /*子要素を折り返し複数行に下から上へ並べる */

  flex-flow: row wrap; /* flex-flow flex-direction flex-wrapをまとめて指定*/

}

　　justify-content.....水平平行の揃え

.conteiner{
  display:flex;
  justify-content: flex-start;/*行の開始位置から配置。左揃え*/
  justify-content: flex-end; /*行末から配置。右揃え*/
  justify-content: center; /*中央揃え*/
  justify-content: space-between; /*最初と最後は両端に配置、残りの要素は均等に間隔をあけ配置*/
  justify-content: space-around; /*両端の子要素も含め、均等に間隔をあけて配置*/

}

　　align-items.....垂直方向の揃え

.conteiner{
  display:flex;
  align-items: stretch;;/*初期値　親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置*/
  align-items: flex-start;; /*親要素の開始位置から配置。上揃え。*/
  align-items: flex-end;; /*親要素の終点から配置。下揃え。*/
  align-items: center;; /*中央揃え*/
  align-items: baseline;; /*ベースラインで揃える*/

}

　　align-content..... 複数行にしたときの揃え
　　※flex-wrap:nowwrap;が適応されていると子要素が一行になるのでalign-contentは無効になる。

.conteiner{
display:flex;
align-content: stretch;　/*親要素の高さに合わせて広げて配置*/
align-content: flex-start;/*親要素の開始位置から配置。上揃え。*/
align-content: flex-end;/*親要素の終点から配置。下揃え*/
align-content: center;/*中央揃え*/
align-content: space-between; /*最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置*/
align-content: space-around; /*上下端にある子要素も含め、均等に間隔*/

}