Flexboxを使いこなそう!-垂直方向の配置指定の仕方-

  • はてブ

Flexboxを使いこなそう!の第5弾です。

[過去の記事]


今回は垂直方向の配置指定についてです。


垂直方向の配置指定

[HTML]


[CSS]


こちらが基準になるHTMLになります。ここから垂直方向の配置指定をしていきましょう。
垂直方向についての指定は『align-items』プロパティを使用します。


stretch – 初期値

img01
DEMO


stretchは初期値になります。
flexコンテナや一番高い要素に合わせて表示してくれます。


flex-start – 開始位置から表示

img02
DEMO


flex-startを指定します。
flexコンテナの開始位置から表示されます。


flex-end – 下部から表示

img03
DEMO

flex-endを指定します。
flexコンテナの下部から表示されます。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">



center – 中央揃えで表示

img04
DEMO

centerを指定します。
flexコンテナの中央に表示されます。


baseline – ベースライン揃えで表示

img05
DEMO

baselineを指定します。
要素内のテキストのベースラインに揃えて表示してくれます。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ