Flexbox - yagisawatakuya/Wiki GitHub Wiki

display: flex;

flex-wrap: wrap;

flex-direction: row;            //子要素を左から右に配置
flex-direction: row-reverse;    //子要素を右から左に配置
flex-direction: column;         //子要素を上から下に配置
flex-direction: column-reverse; //子要素を下から上に配置

flex-flow: row wrap;

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

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

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

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--[if lte IE 9]>
<script src="flexibility.js"></script>
<script>
    $(function(){
        flexibility(document.documentElement);
    });
</script>
<![endif]-->

var emptyCells, i;
$('.js_flex_adjust').each(function() {
  emptyCells = [];
  for (i = 0; i < $(this).find('.js_flex_cell').length; i++) {
    emptyCells.push($('<article>', {
      class: 'js_flex_cell is_empty'
    }));
  }
  $(this).append(emptyCells);
});