そろそろflexboxにしようと思う。

年を取ると、新しいものに対応するのが遅れていく。
結局面倒面倒が続いて、ずっとfloatを使い続けて来たが・・・
そろそろflexboxに変更。

難しいと思ってたけど、まとめてみたらこんなもの。

HTML

<div class="flex_test-box">
    <div class="flex_test-item">
        1.コンテンツが入ります。コンテンツが入ります。
    </div>
    <div class="flex_test-item">
        2.コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
    </div>
    <div class="flex_test-item">
        3.コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
    </div>
    <div class="flex_test-item">
        4.コンテンツが入ります。
    </div>
</div>

CSS

.flex_test-box {
	display: flex;
}

基本これだけ。
これだけで、横に並びます。
あとは調整。

横の揃えを変更：justify-content
flex-start　左揃え
flex-end　右揃え
center　中央揃え
space-between　最初の要素と最後の要素を左右の一番端に配置し、それ以外の要素はバランスよく配置します。
space-around　全ての要素を均等に配置します。
折返し
flex-wrap: wrap;

多分、space-betweenかspace-aroundを一番良く使うでしょう。