关于自适应布局box 与 flex

box虽然出的比较早，但现在使用还是需要加上前缀，而且兼容性也说不上太好。但看到美团在用的是box，而非flex。我想box应该有flex的过代码之处吧。 下面详说box与flex的使用。

**

flex弹性布局

**

html代码

<div class="flexBox">
<p>1</p>
<p>2</p>
<p>3</p>
</div>

横向布局 只需设置css代码如下。

.flexBox{
display: flex;
}

此时，主轴是水平的。行内轴是垂直的。

纵向布局

想要反过来，主轴垂直，行内轴水平。需要用css flex-direction属性

.flexBox{
display: flex; // 单纯的设置纵向布局，是不需要此属性的。 但当设置下面说的居中的时候，此属性是必须的。
flex-direction:column;
}

运行结果：



flex－direction分别有四个属性值：

row： 横向从左到右排列。左对齐

row－reverse： 与row相反

column：纵向排列。左对齐

column－reverse： 与column相反

详细的flex－direction，参考

http://www.css88.com/book/css/properties/flex/flex-direction.htm

相对于主轴居中

css的justify-content 属性。当属性值为center时，设置相对于主轴居中

相对于行内轴居中

css的align-item属性。当属性值为center时，设置相对于行内轴居中。