Flexbox-CSS3弹性盒模型flexbox完整版教程

http://caibaojian.com/flexbox-guide.html

基础知识

因为flexbox是一个总体模块，而不是单一的一个属性，它涉及到了不少东西，包括它的整个属性集。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。

若是常常布局基于块和内嵌流方向，柔性布局基于“柔性流动方向”。请看看这个数字从规范，解释背后的柔性布局的主要思路。

属性介绍

display: flex | inline-flex; (适用于父类容器元素上)

定义一个flex容器，内联或者根据指定的值，来做用于下面的子类容器。

• box：将对象做为弹性伸缩盒显示。（伸缩盒最老版本）（css3）
• inline-box：将对象做为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
• flexbox：将对象做为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
• inline-flexbox：将对象做为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
• flex：将对象做为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
• inline-flex：将对象做为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

请注意：

1.css 列（CSS columns）在弹性盒子中不起做用

2.float, clear and vertical-align 在flex项目中不起做用

原文连接：Flexbox-CSS3弹性盒模型flexbox完整版教程 版权全部，转载时请注明出处，违者必究。
注明出处格式：前端开发博客 (http://caibaojian.com/flexbox-guide.html)