对弹性布局flex-direction属性的理解

对弹性布局flex-direction属性的理解

让我来谈谈我对弹性布局flex-direction属性的理解，下面就用一个简单的例子来讲我对它的了解。首先让我们看看它的HTML布局：

它就是一个用一个大的div来包着4个小的div来完成的，那么接下来就是css部分的代码了，而且弹性布局也是写在css中的如下图：

其中第一个div就是用来设计弹性布局的，而后面的div就是设计它的样式，宽高、文字大小、颜色等等；而弹性布局的属性最好是写在同一个div中，那么接下来就是flex-direction属性的理解，它有四个不同的样式：row、row-reverse、column、column-reverse，这四个，下图就是row的模型：

它是横着从左到右1234这个顺序来的而row- reverse也是横着的不过顺序就不一样了是4321这个顺序，最后就是它的column样式了如下图：

这就是它的column样式了，它是竖着的也是按图中的从上到下1234这个顺序来的，而它的column-reverse就是反过来的也就是从上到下的顺序变成了4321这样了。