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
