2022/10/15 

CSSで要素を横に並べる

CSSで要素を横に並べたかったので、やり方を調べましたので記載しました。

以下のイメージのような、レイアウトを実現したい場合、flexboxを使用します。flexbox レイアウトは、親要素の display プロパティの flex 値を使うことによって定義されます。親要素は flex コンテナとなり、その子要素は flex アイテムとなります。flexbox はサイズが不明、もしくは動的である場合でも flex コンテナの中にある flex アイテムの配置を実現してくれる便利な方法です

<div class="d-flex"> <!-- 親要素 -->
    <div class="box bg-blue">1</div> <!-- 子要素 -->
    <div class="box bg-red">2</div> <!-- 子要素 -->
    <div class="box bg-green">3</div> <!-- 子要素 -->
</div>
.box {
    width:25px;
    height:25px;
}
.d-flex {
    display: flex;
}
.bg-red {
    background-color:red;
}
.bg-blue {
    background-color:blue;
}
.bg-green {
    background:green;
}

実際の表示

1
2
3

コメントを書き込む

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


カテゴリ



プロフィール

運営者 HONDA

福島県出身、在住

広告

このブログで契約しているレンタルサーバです。