CSS布局----flex弹性布局(移动端完美解决方案），移动web开发教程

1，如何使用

2， Flexbox的两根轴线

3， Flex 容器

4，API以及用例

1，- 如何使用-因为css用法过于简单，所以先给大家介绍简单的使用方法，随后介绍一些重要的概念

block1

block2

block3

效果图如下：

2，- Flexbox的两根轴线

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

主轴

主轴由 flex-direction 定义，可以取4个值：

• row

• row-reverse

• column

• column-reverse

如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。

如果你选择了 row 或者 row-reverse，你的主轴将沿着 **inline **方向延伸。

选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。

交叉轴

交叉轴垂直于主轴&