一、什么是Flex布局
Flex布局是CSS3新增的一种布局方式,是一种响应式布局技术。早期前端开发中,页面布局会使用表格、浮动、定位等方式。但随着移动设备的流行,页面要支持不同的屏幕尺寸和分辨率,使用这些布局方式就比较困难。而Flex布局可以轻松实现页面的自适应布局效果。
Flex布局定义了一个容器,容器内部的子元素按照指定的方式和比例分配父容器的可用空间。Flex布局会自动调整元素的大小和位置,使得页面的布局在不同的屏幕尺寸和分辨率下都能保持良好的表现。
二、如何使用Flex布局
使用Flex布局需要对容器和子元素进行定义。我们可以通过设置容器的display属性为flex来开启Flex布局。而对于子元素,我们可以使用flex属性来定义子元素的大小和比例。
下面是一个简单的例子:
```