flex 布局能解决的问题

flex 布局，可以解决元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。

转载网址：http://blog.csdn.net/baiding1123/article/details/47663217

2、用法:

使用flex布局首先在HTML中的父元素上设置display属性：

.flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
}

或者你想让它像内联元素一样，可以这样写：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意：这是唯一的要设置在父容器上的属性，所有的直接子元素会成为自动flex项目。

3、flexbox 容器的属性：

flex-direction:row(默认值) | row-reverse | column | column-reverse;

该属性指定了Flex的项目怎样在flex容器中排列，设置flex容器的主轴方向，它们(项目)两个主要的方向排列，就像一行一样水平排列或者像一列一样垂直排列。

values：

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}