CSS

Flexbox

'18.12.08

CSSに以下のコードを記載。

.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)