Flex布局

再不写点东西，我觉得我可能很久都会这样懒下去....

最近项目上要写不少前端页面，flex布局也学了一段时间，但是一直不怎么会用，所以，那就没有困难，创造困难，Flex走起~

Flex 到底是什么东西？

传统布局方式是基于盒模型的布局，核心是绝对定位，相对定位等。很长时间，占据着定位的主流地位。

而移动端的兴起，传统的定位显得力不从心。Flex应运而生，移动端布局没有Pc端的历史包袱，相关技术的演进非常快。

Flex即弹性布局。

Flex 为什么我学不会？

其实Flex的属性并不多，但是掌握起来并不容易。一方面可能练习比较少，另一方面没有真正的理解Flex布局。

Flex 的核心是横轴和纵轴

bg2015071004.png

不用去管那么多的属性，理解Flex的核心就是理解横轴和纵轴。如上图所示，在flex容器中，假设横向为主轴(flex-direction)，那么通过主轴就能控制内部元素的横向对齐方式(justify-content)：居左(flex-start)，居中(center)，居右(flex-end)，两端对齐(space-between)，每个项目间隔（space-around）。

这时候纵向其实也是类似的情况。

其实这时候，已经基本理解了Flex布局，当然还有相关的项目属性，可以通过查阅手册去理解。