小金井にあるWEB制作会社の備忘録

MEMORANDUM

CSS「display:flex」で「clearfix」を使わずに要素を並べる。

創業時(2010年頃)にお世話なっていた「clearfix」。
当時は要素を横に並べると言えば定番だったが、今はより簡単な「display:flex」の使い方をメモ。

HTML

<ul>
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
</ul>

CSS

ul {
	display: -webkit-flex;
	display: flex;
}

上記の初期設定では左揃え、上揃え、要素が増えても改行はなく、幅は内包する要素の幅(テキスト量・画像サイズ)によって変化する。余白はなし。
配置や並びを変更する際は下記プロパティを同セレクターに追加。

プロパティ説明効果
flex-direction並び順を指定row左から右へ配置
row-reverse右から左へ配置
column上から下へ配置
column-reverse下から上へ配置
flex-wrap改行を指定nowrap改行させずに一列に配置
wrap改行して上から下へと配置
wrap-reverse改行して下から上へと配置
justify-content水平方向の配置を指定 flex-start左揃え
flex-end右揃え
center左右中央揃え
space-between両端の余白を空けずに等間隔で配置
space-around全て等間隔で配置
align-items垂直方向の配置を指定stretchデフォルト
flex-start上揃え
flex-end下揃え
center上下中央揃え
baselineベースライン

また、子セレクターに指定することで効果のあるものもある。

プロパティ説明
order並び順を指定-1、0、1、2
flex-grow伸び率を指定1、2、3
flex-shrink縮み率を指定1、2、3
flex-basisベースの幅を指定10%、20%
flex均等幅1

参考までに以前の方法(clearfix版)が知りたい方は下記

HTML

<ul class="clearfix">
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
</ul>

CSS(clearfix版)

.clearfix {
zoom: 100%;
min-hight: 0px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}

同一カテゴリーの記事