めちゃ便利じゃねぇか。floatさよなら。
標準のCSSでいけたのか…
Flexboxはグリッドレイアウトを実現するCSSです。グリッドレイアウト自体はVuetifyで結構使ってたのですが、これってCSSの標準機能だったのね😅
ググると詳しい使い方はいろんなサイトで紹介されているので細かい事書きませんが、cssに
display: flex
と入れるだけでグリッドレイアウトにできます。簡単…。今までfloat: left;とか駆使してたけどfloatよくわからなかったのよね。
関連記事をflexとcalcで表示させました
各記事の下にflexbox使って関連記事を表示させました。
↑こんな感じです(1カラムなのでグリッドレイアウトな感じは無いですが)。
CSSはこんな感じ
.related-post {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.related-entry {
width: 100%;
border-width: thin;
border-bottom-style: solid;
border-color: #DDDDDD;
display: flex;
flex-wrap: nowrap;
}
.related-entry-img {
border: none;
width: 100px;
margin: 5px;
}
.related-entry-title {
width: calc(100% - 130px);
margin: 10px;
}構造はrelated-post > related-entry > related-entry-img | related-entry-title という階層です。
大元のrelated-postのdisplayにflexを指定してflex-wrapをwrapとすることで子の要素が横ではなく縦に並ぶようになります。
子はrelated-entryでこれが一つで一行になります。ここもdisplay: flexにしてこちらはflex-wrapをno-wrapにして子要素が横に並ぶようにしています。
子要素はrelated-entry-imgとrelated-entry-titleです。知らなかったんですけど幅の計算にcalcというのが使えて自動計算できるんですね。
imgは幅100px固定にして、titleは画面全幅から画像とマージン分の130pxを差し引いた分を確保するようにしています。幅に合わせて自動計算するのでレスポンシブに表示させたいときに非常に便利。
割り算も使えるようなので横に3つの要素を並べるとかも簡単にできるようです。
floatより超簡単にレイアウトが作れました。最近のブラウザはだいたい対応しているようなので、まだfloatで頑張ってる人はflex使ってみてはどうでしょうか。
