CSS3弹性伸缩布局（一）——Flex布局
Flex布局（Flexible Box Layout）是一种现代的、灵活的页面布局方式，它是CSS3的一个重要特性。它被设计用于更有效地实现复杂的页面布局，并且可以更加快速地响应不同设备的屏幕大小和分辨率。在本文中，我们将深入探讨Flex布局的基础知识和应用。
- 什么是Flex布局？
Flex布局是一种弹性盒子模型，它将容器内的元素按照一定的规则排列，并且可以自适应不同的屏幕大小和设备方向。Flex布局是一种二维布局方式，它将容器内的元素沿着主轴（即纵轴）和交叉轴（即横轴）排列。通过设置元素的flex属性，可以控制元素在主轴和交叉轴上的对齐方式和伸缩比例。 - Flex布局的优点
Flex布局相对于传统的盒子模型有许多优点。以下是其中一些优点：
（1）自适应性和灵活性
Flex布局可以自适应不同的屏幕大小和设备方向，使得页面的布局更加灵活和自由。通过设置flex属性，可以控制元素的大小、对齐方式和间距，从而实现更加复杂的页面布局。
（2）直观性和易用性
Flex布局的属性设置非常直观和易于理解，使得开发者可以更加快速地实现页面布局。同时，Flex布局也提供了一些简化的属性设置，例如flex-wrap、flex-direction等，使得开发者可以更加方便地控制元素的排列方式。
（3）更好的性能和兼容性
Flex布局使用了现代的CSS技术，具有更好的性能和兼容性。它可以在不同的浏览器和设备上实现一致的布局效果，并且可以更加快速地响应用户的操作和交互。 - Flex布局的基本属性
Flex布局提供了许多基本的属性，用于控制元素的排列方式和伸缩比例。以下是其中一些基本的属性：
（1）flex-direction属性
flex-direction属性用于控制元素的排列方向，它可以取值为row（默认值，即沿着主轴排列）和column（即沿着交叉轴排列）。
（2）flex-wrap属性
flex-wrap属性用于控制元素是否换行，它可以取值为nowrap（默认值，即不换行）和wrap（即换行）。
（3）justify-content属性
justify-content属性用于控制元素在主轴上的对齐方式，它可以取值为flex-start（默认值，即起点对齐）、flex-end（即终点对齐）、center（即居中对齐）、space-between（即两端对齐，元素之间的间距相等）、space-around（即平均分布，元素之间的间距和两端的间距相等）等。