メディアクエリはなし、同じ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のショートハンド。

  • flex-grow: 1;は、全てのflexアイテムは同じサイズになる
  • flex-shrink: 1;は、flexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定
  • flex-basis: 10ch;は、flexアイテムを10chに指定し、残りは最初の大きさに従う。1ch単位はフォントの「0」文字の幅に相当する

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

【参考】
https://coliss.com/articles/build-websites/operation/css/4-layouts-form-used-flexbox.html

inserted by FC2 system