css的flex布局详解

CSS的Flex布局（Flexible Box Layout）是一种现代的布局模式，它设计用来更有效地在容器内排列、对齐和分配空间给子项（子元素），即使子项的大小是动态或未知的。Flex布局非常适用于构建复杂的页面布局和对齐控件，特别是在响应式设计中。

以下是Flex布局的一些主要概念和属性的详解：

1. Flex容器

要应用Flex布局，你首先需要将一个元素设置为Flex容器。这可以通过将display属性设置为flex或inline-flex来实现。

.container {
   
  display: flex; /* 或 inline-flex */
}

2. Flex方向

Flex容器中的子项默认沿水平轴（行）排列，但你可以使用flex-direction属性来改变这个方向。

.container {
   
  flex-direction: row;       /* 默认，子项水平排列 */
  flex-direction: row-reverse; /* 子项水平反向排列 */
  flex-direction: column;    /* 子项垂直排列 */
  flex-direction: column-reverse; /* 子项垂直反向排列 */
}

3. Flex换行

默认情况下，Flex容器中的子项都尽量在一行内显示。如果子项太多，它们会缩小以适应容器。使用flex-wrap属性可以控制子项是否换行。

.container {
   
  flex-wrap: nowrap;         /* 默认，不换行 */
  flex-wrap