掌握CSS Flex布局，轻松实现页面的自适应布局效果

一、什么是Flex布局

Flex布局是CSS3新增的一种布局方式，是一种响应式布局技术。早期前端开发中，页面布局会使用表格、浮动、定位等方式。但随着移动设备的流行，页面要支持不同的屏幕尺寸和分辨率，使用这些布局方式就比较困难。而Flex布局可以轻松实现页面的自适应布局效果。

Flex布局定义了一个容器，容器内部的子元素按照指定的方式和比例分配父容器的可用空间。Flex布局会自动调整元素的大小和位置，使得页面的布局在不同的屏幕尺寸和分辨率下都能保持良好的表现。

二、如何使用Flex布局

使用Flex布局需要对容器和子元素进行定义。我们可以通过设置容器的display属性为flex来开启Flex布局。而对于子元素，我们可以使用flex属性来定义子元素的大小和比例。

下面是一个简单的例子：

```