CSS已经成为现代web设计必不可少的一部分。在移动设备领域，使用CSS进行布局也变得日益重要。这篇文章将介绍一种新的CSS布局方式 – flex。

Flex布局，是CSS3中新增的一种布局方式。它可以让我们更加方便地实现多种页面布局。

Flex布局的基本组成部分是容器和项目。容器是指被设置为“display: flex”的元素。项目是指容器中的子元素。

通过设置容器的属性，可以控制项目的位置、排列方式、间距、对齐等。

下面是一个简单的例子：

.container {display: flex;flex-flow: row wrap;justify-content: space-between;}.item {flex-basis: 30%;margin-bottom: 20px;}

上面的代码中，我们定义了一个容器和若干个项目。容器的属性包括：

• display: flex;– 指定容器为flex布局。
• flex-flow: row wrap;– 指定项目排列为一行，并自动换行。
• justify-content: space-between;– 指定项目在主轴上的对齐方式为两端对齐。

项目的属性包括：

• flex-basis: 30%;– 指定项目占据主轴上的空间为30%。
• margin-bottom: 20px;– 指定项目间的下边距为20像素。

有了以上代码，我们就可以实现一个简单的flex布局了。

总结：使用flex布局可以更加方便地实现多种页面布局。仅仅设置容器和项目的属性即可轻松实现对齐、间距等效果。相比传统的布局方式，flex布局是更为高效、灵活的。