CSS3 Flexbox 图解

原文链接

翻译：孙和

Flexbox 布局，官方叫法是：Flexible Box 布局模式，是CSS3的新型布局模式。它可以用于容器中元素的对齐、方向和顺序，就算这些元素是动态生成的，就算我们不知道这些元素的尺寸。Flex容器的主要特点是：他可以修改自己子元素的宽高，在不同的屏幕尺寸下，用最好的方式填充空间。

很多设计师和程序员发现flexbox布局很容易使用，因为给元素定位很容易，因此可以用很少的代码实现很复杂的布局。这大大简化了开发流程。

Flexbox布局算法基于方向，不像基于垂直或水平方式布局的block和inline。CSS栅格布局模式正逐渐通行于大规模的布局，所以Flexbox布局方式一般用于小的应用组件。

Flex布局由父容器和他的直接子元素构成。父容器被称为flex container，子元素被称为flex items。

支持最新flexbox规范的浏览器：
Android 4.4+
iOS 7.1+(-webkit前缀)

在父节点上，设置display属性，就可以用flexbox布局

.flex-container{
  display:-webkit-flex;
  display:flex;
}

如果你想让他显示为行内元素

.flex-container{
  display:-webkit-inline-flex;
  display:inline-flex;
}

注意，在父容器上，这是你唯一要设置的属性。 并且，他的所有直接子节点都会自动变为flex items。

.flex-container{
  -webkit-flex-direction:row;
  flex-direction:row;
}
.flex-container{
  -webkit-flex-direction:row-reverse;
  flex-direction:row-reverse;
}
.flex-container{
  -webkit-flex-direction:column;
  flex-direction:column;
}
.flex-container{
  -webkit-flex-direction:column-reverse;
  flex-direction:column-reverse;
}

.flex-container{
  -webkit-flex-wrap:nowrap;
  flex-wrap:nowrap;
}

.flex-container{
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}
.flex-container{
  -webkit-flex-wrap:wrap-reverse;
  flex-wrap:wrap-reverse;
}
.flex-container{
  -webkit-flex-flow:<flex-direction>||<flex-wrap>;
  flex-flow:<flex-direction>||<flex-wrap>;
}

.flex-container{
  -webkit-justify-content:flex-start;
  justify-content:flex-start;
}
.flex-container{
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
}
.flex-container{
  -webkit-justify-content:center;
  justify-content:center;
}
.flex-container{
  -webkit-justify-content:space-between;
  justify-content:space-between;
}

.flex-container{
  -webkit-justify-content:space-around;
  justify-content:space-around;
}

.flex-container{
  -webkit-align-items:stretch;
  align-items:stretch;
}