Looking for css Answers? Try Ask4KnowledgeBase
Looking for css Keywords? Try Ask4Keywords

CSS柔軟なボックスレイアウト(Flexbox)


前書き

Flexible Boxモジュールは、ユーザーインターフェイス用に設計されたボックスモデルで、コンテナ内のアイテム間のスペースを調整して配置することで、ページレイアウトが異なる未知の画面サイズ。フレックスコンテナは、項目を展開して使用可能なスペースを埋めるようにし、オーバーフローを防ぐために縮小します。

構文

  • ディスプレイ:フレックス;
  • フレックス方向:行|行 - 逆|列|列逆転;
  • フレックスラップ:nowrap |ラップ|折り返し;
  • フレックスフロー:<'フレックス方向'> || <'flex-wrap'>
  • justify-content:フレックススタート|フレックスエンド|センター| |スペース・アラウンド;
  • align-items:フレックススタート|フレックスエンド|センター| |ストレッチ;
  • align-content:フレックススタート|フレックスエンド|センター| |スペース - 周辺|ストレッチ;
  • 順序:<整数>。
  • flex-grow:<数字>; / *デフォルト値0 * /
  • フレックスシュリンク:<number>; / *デフォルト1 * /
  • フレックスベース:<length> |自動; / *デフォルトのauto * /
  • フレックス:なし| [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
  • align-self:auto |フレックススタート|フレックスエンド|センター| |ストレッチ;

備考

ベンダーの接頭辞

  • 表示:-webkit-box; / * Chrome <20 * /
  • 表示:-webkit-flex; / * Chrome 20+ * /
  • 表示:-moz-box; / * Firefox * /
  • ディスプレイ:-ms-flexbox; / * IE * /
  • ディスプレイ:フレックス; / *最新のブラウザ* /

リソース

柔軟なボックスレイアウト(Flexbox) 関連する例