CSS-flex布局

CSS的Flexbox（弹性盒子）布局提供了一种更灵活的方式来对容器内的项目进行排列、对齐和分配空间。以下是一些关键的CSS属性和它们的作用：

• display: flex; - 这将创建一个弹性容器。
• flex-direction - 定义项目的方向，可以是行（row，默认）、行反向（row-reverse）、列（column）或列反向（column-reverse）。
• justify-content - 定义项目在主轴上的对齐方式，可以是flex-start（默认）、flex-end、center、space-between或space-around。
• align-items - 定义项目在交叉轴上的对齐方式，可以是flex-start、flex-end、center、baseline或stretch（默认）。
• flex-wrap - 定义当容器太小无法放下所有项目时是否应该换行，可以是nowrap（默认）、wrap或wrap-reverse。
• flex-flow - 是flex-direction和flex-wrap的简写形式，默认为row nowrap。

下面是一个简单的Flex布局示例：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  background-color: lightblue;
}
 
.flex-item {
  width: 50px;
  height: 50px;
  background-color: coral;
  margin: 10px;
}

这个例子中，.flex-container 是一个弹性容器，它拥有三个子元素 .flex-item，这些项目在容器中水平排列，每个项目周围有间距，并且容器两端的空间分布对称。