[css]Flex弹性布局详解 [附携程网移动端案例]

flex布局代码：

1

2

3

它的效果和传统布局是一样的，并且我们不需要考虑他是块级元素还是行内元素，或者考虑清除浮动等等影响

如果我们要三个span平均分三等份的话，只需要加一句flex:1,也就是:

div span {

flex:1;

width: 100px;

height: 60px;

background-color: purple;

}

这样就可以轻松的实现平均分三等份了

有没有体验到flex弹性布局的便捷😊

二、flex布局父项常见属性

---

1.flex-direction

flex-direction 设置主轴方向

就是他决定子级元素是横着排列还是竖着排列

默认是 flex-direction:row (横着从左往右排)

在上面的例子中，如果给父级添加 flex-direction:column，子级元素就会竖着排列：

代码：

div {

display: flex;

width: 500px;

height: 200px;

background-color: pink;

flex-direction: column;

}

2.justify-content

justify-content 设置主轴上的子元素排列方式

默认为： justify-content:flex-start;  (从头开始排,贴着左边对齐)

如果想贴着右边对齐就是：

justify-content:flex-end;

如果想沿着主轴居中对齐就是：

justify-content:center;

这样我们实现让父盒子里的子盒子水平居中对齐就非常的方便了

平均分配剩余空间：

justify-content:space-around;

先两边贴边，再平分剩余空间：

justify-content:space-between;

3.flex-wrap

我们先创建一个粉色