前端01-css3-flex布局

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排列、对齐和分配空间。Flexbox可以使容器内的项目能够在任何方向上动态扩展和收缩，以最佳方式填充可用空间。

以下是一个简单的Flexbox布局的例子：

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布局 */
  flex-direction: row; /* 设置主轴方向为水平方向 */
  justify-content: space-around; /* 项目在主轴方向上平均分布 */
  align-items: center; /* 项目在交叉轴方向上居中 */
  height: 200px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

在这个例子中，.flex-container 类使用了 display: flex 属性来指定这个div是一个Flex容器。flex-direction 属性设置了主轴的方向（row为水平，column为垂直），justify-content 属性设置了项目在主轴方向上的对齐方式（这里是平均分布），align-items 属性设置了项目在交叉轴方向上的对齐方式（居中）。.flex-item 类则是对Flex容器内的每个项目进行样式设置。