Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装

メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox

[coliss]

幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニック。

[katsusuke]

これはすごい。便利だなぁ

[nicht-sein]

なるほどー

[mayumayu_nimolove]

メディアクエリがあったら何かダメなんだろうか。ダメとは言ってないか。

[fai_fx]

良き。