- 投稿日:2022年02月16日 16時18分46秒
- 更新日:2022年03月03日 09時32分10秒

クラス指定のみで横に綺麗に並べる
side-by-side
.side-by-side{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 10px;
--side-by-side-width: auto;
}
.side-by-side.no-justify{
justify-content: left;
}
.side-by-side:after{
content:"";
display:block;
height:0;
}
.side-by-side.clm5{
--side-by-side-width: 19%;
}
.side-by-side.clm4{
--side-by-side-width: 24%;
}
.side-by-side.clm3{
--side-by-side-width: 32%;
}
.side-by-side.clm2{
--side-by-side-width: 48%;
}
.side-by-side > .clmItem{
width: var(--side-by-side-width);
float:left;
}
.side-by-side:after{
width: var(--side-by-side-width);
}
/* width: 100%;で残りスペースを埋める */
.side-by-side > .clmItem.spacer {
width: 100% !important;
}
/* ulに適用した場合 */
ul.side-by-side > li{
margin: 5px;
}
説明
display: flexを使って横並びにしたいときに使うスタイルです。
親要素にside-baby-sideクラス、子要素にclmItemクラスを付与します。
後は親要素にclm2〜clm5のいずれかのクラスを付与するとclmItemのwidthが変わります。
他にも子要素にspacerクラスを追加したりすると改行できるようになっていたりもします。