Flexbox 弹性盒模型

FlexBox（CSS Flexible Box Layout Module）是css3新添加一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。

Flex盒模型

• 新版本语法：
  • display: flex;
  • display: inline-flex;
  • flex-direction:column;
  • justify-content:space-between;
  • align-items:flex-start；
• 旧版本语法：
  • display: -webkit-box;
  • -webkit-box-orient: vertical;
  • -webkit-box-pack: justify;

新旧版本语法对比

新旧版本语法对比

Flex 语法

Flex 布局教程：语法篇

• 容器的属性
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
• 项目的属性
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Flex 案例

  
  
  


  
OMG, I’m centered

 

反向分布

  
1
  
2
  
3

典型布局

• 骰子布局
• 网格布局
• 百分比布局
• 圣杯布局
• 输入框布局
• 悬挂式布局
• 固定的底栏

参考

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇
• 详解css3弹性盒模型（Flexbox）
• CSS3 Flexbox在移动端的应用