この記事はアイスタイル Advent Calendar 2023 3日目の記事です。

potisionではなくFlexboxで実装する小技

よく使うわりに記述内容を忘れてしまうので備忘録を兼ねて

例えばビジュアルや画像内で文字列などの要素を天地中央に配置したいとかpositionプロパティを使ってレイアウトを組むと思いますが、最近はFlexboxを使うのにハマってます。
positionを使用することで要素の高さが担保できなく、レイアウトが崩れることがある…など困ったときにとても便利だなと思いました。

特定の要素内で天地中央に配置する例

例）画像の中にテキストを天地中央に配置
▼position

See the Pen positionを使わないでflexでデザイン配置する（position） by か。 (@rnzdywgn-the-flexboxer) on CodePen.

▼Flexbox

See the Pen positionを使わないでflexでデザイン配置（flex） by か。 (@rnzdywgn-the-flexboxer) on CodePen.

justify-content:centerで中央寄せにし、align-items:centerで中央揃えにすることで天地中央にすることができます。

要素同士を上下で配置したい

例）イメージ図

See the Pen 要素同士を上下に配置する（position） by か。 (@rnzdywgn-the-flexboxer) on CodePen.

flex-direction:columnで起点を垂直に変更しjustify-content:space-betweenで両端揃えで均等にすることで上下に配置できます。

こういったレイアウトを組む場合、positionを使用するとabsoluteされた要素の高さを担保できなくなるのでレイアウトの組み方を考慮する必要がありますがFlexboxならあまり難しく考えずに実装できます。（要素の大きさが変化した際に崩れるという心配事が減りますね～）