CSS「-webkit-line-clamp」を使用して複数行にも対応した三点リーダー(…)を実装する
ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。…
創業時(2010年頃)にお世話なっていた「clearfix」。
当時は要素を横に並べると言えば定番だったが、今はより簡単な「display:flex」の使い方をメモ。
<ul>
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
</ul>
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版)が知りたい方は下記
<ul class="clearfix">
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
</ul>
.clearfix {
zoom: 100%;
min-hight: 0px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}