Download CSS (PDF)

CSS

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） 関連する例

PDF - Download CSS for free


Previous Next
Related Tags
This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0
This website is not affiliated with Stack Overflow