Flexbox
'18.12.08CSSに以下のコードを記載。
.flex{display:-webkit-box;display:-webkit-flex;display:flex} .fhC{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center} .fhL{-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start} .fhR{-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end} .fhLR{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between} .fvS{-webkit-box-align:start;-webkit-align-items:start;align-items:flex-start} .fvC{-webkit-box-align:center;-webkit-align-items:center;align-items:center} .fWrap{box-lines:multiple;-webkit-flex-wrap:wrap;flex-wrap:wrap} .fCol{-webkit-box-orient:block-axis;-webkit-flex-direction:column;flex-direction:column}
「flex」で子要素を配列。
■fhC:横の並び(中央揃え)
<div class="flex fhC"> <div>子要素1</div> <div>子要素2</div> <div>子要素3</div> </div>
子要素1
子要素2
子要素3
■fhLR:横の並び(均等配置)
<div class="flex fhLR"> <div>子要素1</div> <div>子要素2</div> <div>子要素3</div> </div>
子要素1
子要素2
子要素3
(View1871)