Flexboxで実装する定番レイアウトのコードのまとめ

Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン

[coliss]

Webページやスマホアプリに使用される定番レイアウトをCSS Flexboxで実装したシンプルなコードのまとめ。

[ku__ra__ge]

配色のせいでSIMカードにしか見えない

[nelpesica]

[][flex][レイアウト][サンプル]

[keint]

FluxBoxに空目した

[Kmusiclife]

縦計算やだ。そろそろflexを、ともう何年目だ。そろそろ。

[tatsu-n]

ブコメ見たせいでSIMカードにしか見えない呪いにかかった

[buhoho]

flex-grow: 1;指定されたアイテムはflex親要素を埋めようと広がる感じかな

[tetsu23]

色合い的にSIMの裏かと思った。

[hanakoume302]

勉強にはなるんだけど、このサイトの色使いは本当に見づらい。

[mayumayu_nimolove]

ありがてえありがてえスニペット