CSS flex-direction属性（学习认识和个人理解）

我对这个概念的了解还是来自于写小程序的时候看到的样式代码：

.box{
  /*将容器指定为弹性布局*/
  display:flex;
  /*设置其主轴为垂直方向*/
  flex-direction:column;
}

要讲flex-direction属性,我们先来了解一下Flex。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。采用Flex布局的元素我们叫做 Flex容器。它的所有子元素自动成为容器成员。（来自：http://www.runoob.com/w3cnote/flex-grammar.html）

flex-direction属性决定了其主轴的方向，也就是容器里项目排列的方向。它的4个值分别如下：

.box{
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction:row;

主轴为水平方向，起点在左端。
（我个人是理解成，从左往右，横着排，分成n列，）

row

flex-direction:row-reverse;

主轴为水平方向，起点在右端。
（我个人是理解成，从右往左，横着排，分成n列）

row-reverse

row和row-reverse可以说就像瀑布流布局？这样的网站比如花瓣网，会不会好理解一点？

花瓣网

flex-direction:column;

主轴为垂直方向，起点在上端。
（我个人是理解成，从上往下，竖着排，分成n行）

column

flex-direction:column;

主轴为垂直方向，起点在上端。
（我个人是理解成，从下往上，竖着排，分成n行）

column-reverse

而column和column-reverse大概就像简书首页的推送emmmmm，每一条推送作为一个项目被 从上往下竖着排，分成一行一行的文章推送的信息，应该可以这样子理解的吧：

简书