【CSS】とにかく便利！Flexbox。その2：実装

2022.7.14

【CSS】とにかく便利！Flexbox。その2：実装

前回、Flexboxの基本編をご紹介しました。
今回は実装結果を見ていきましょう。

親要素に設定できるプロパティ（flexコンテナ）

See the Pen <a href="https://codepen.io/Uchaaan/pen/zYWoxLo"> Flexbox（flexコンテナ）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

子要素に設定できるプロパティ（flexアイテム）

See the Pen <a href="https://codepen.io/Uchaaan/pen/VwXmLzq"> Flexbox（flexコンテナ）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

Flexboxのよく使うあれこれ

ヘッダー

あえてFlexboxで作ってみました。

See the Pen <a href="https://codepen.io/Uchaaan/pen/abYBvRo"> ヘッダー（Flexbox）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

横並びのBOX（ボタンを下に揃えて配置）

よくある横並びです。
文章量が違うけど、ボタンは下配置で、横と合わせて欲しい。
そんな要望もFlexboxだと簡単です。

See the Pen <a href="https://codepen.io/Uchaaan/pen/poLNjMG"> 横並びのBOX（ボタンを下に揃えて配置：Flexbox）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

画像とテキストの横並びレイアウト

こちらもよくある画像とテキストを交互に配置するレイアウトです。
 See the Pen <a href="https://codepen.io/Uchaaan/pen/mdxOVxK"> 画像とテキストの横並びレイアウト</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

いかがでしたでしょうか。
よく使うFlexboxのご紹介でした。