• 投稿日: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クラスを追加したりすると改行できるようになっていたりもします。

詳細

最後に

色々な自作スタイルの中でもよく使う物です。
たまにレスポンシブで幅を変えることもしています。

思ってるより便利なので是非コピペして使って頂ければと。

最後に

JSアニメーション:文字の登場
CSSアニメーション:カク回転
画面右下固定のスクロールボタン
擬似クラス【hover / nth-of-type / nth-child】
疑似要素【before/after】
positionプロパティ(位置指定)について
タグにマウスホバーしたとき下線を走らせる
モーダルな画面を表示をする