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

同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされる。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得らる。

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email Address">
  <input type="submit" value="Subscribe">
</form>

form {
  display: flex;
  flex-wrap: wrap;
}
form > input {
  flex: 1 1 10ch;
  margin: .5rem;
}
form > input[type="email"] {
  flex: 3 1 30ch;
}

flexは、flex-growとflex-shrinkとflex-basisのショートハンド。

3つのinput要素の初期サイズはflex-basisの値、10ch, 30ch, 10chになり、合計値は50chになる。配置するスペースが50ch以上の場合（アイテムがスペースに収まる場合）は、1行に配置される。