CSS布局----flex弹性布局(移动端完美解决方案）

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局网格布局，以后会和大家讲到

目录

1，如何使用
2， Flexbox的两根轴线
3， Flex 容器
4，API以及用例

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

    <style type="text/css">
        #flex-box {
            background: #ccc;
            display: flex;  /* display 属性规定元素应该生成的框的类型 ，我们是flex*/
            flex-direction: row; /* 接下来我们会讲到*/
        }
        #flex-box > div {
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

效果图如下：

2，- Flexbox的两根轴线

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

主轴

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

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

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