Flex布局了解

Flex布局是一种用来布局盒子的新模式，它可以取代用浮动和定位来实现的布局。使用Flex布局可以让容器中的子元素按照一定规则排列成一行或一列，非常适合移动端的响应式布局。

Flex布局主要由两部分组成：容器（flex container）和项目（flex item）。容器是父元素，包含了一些子元素，项目则是子元素。以下是Flex布局的一些特点：

• 容器默认采用行布局，即子元素排列方向为水平方向。
• 采用Flex布局后，子元素的float、clear、vertical-align属性都将失效。
• 容器可以控制子元素的排列方向、排列顺序、对齐方式、等分方式等。
• 子元素可以控制自己在容器中的位置、大小等属性。

Flex布局的实现比较简单，只需要在容器上添加display:flex或display:inline-flex属性即可。在容器上设置的各种属性可以影响到子元素的排列方式和样式。常见的属性包括：

• flex-direction：控制子元素的排列方向。
• justify-content：控制子元素的对齐方式。
• align-items：控制子元素在交叉轴上的对齐方式。
• flex-wrap：控制子元素的排列方式是否换行。
• align-content：控制多行子元素在交叉轴上的对齐方式。

总之，采用Flex布局可以快速实现复杂的布局效果，而且易于维护和扩展。