【コピペOK】FlexBoxについて

下記をコピペすれば、結構便利です。
——————————————————————
.flex-box{display:flex;}
.flex-between{justify-content: space-between;}
.flex-wrap{flex-wrap:wrap;}
——————————————————————

使い方

上記CSSは要素を横並びにしたいときに使います。
<ul>
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
<li>えええええ</li>
<li>おおおおお</li>
</ul>

【上記を横並びにしたいとき】
<ul class=”flex-box”>
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
<li>えええええ</li>
<li>おおおおお</li>
</ul>


【上記を横並びかつバランスよく配置】
<ul class=”flex-box flex-between”>
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
<li>えええええ</li>
<li>おおおおお</li>
</ul>


【上記を横並びかつ改行したいとき】
<ul class=”flex-box flex-wrap”>
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
<li>えええええ</li>
<li>おおおおお</li>
</ul>

クラス指定で横並びを制御できるようになります。

css