html/css基础之flex(弹性布局)

在HTML和CSS中，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-direction: row; /* 设置主轴方向为水平 */
  justify-content: center; /* 水平居中所有子元素 */
  align-items: center; /* 垂直居中所有子元素 */
  height: 100vh; /* 容器高度为视口高度 */
}
 
.flex-item {
  margin: 10px; /* 子元素之间的间隔 */
}

在这个例子中，.flex-container 类使用 display: flex 属性启用Flexbox布局。flex-direction 属性设置为 row 表示主轴方向是水平的。justify-content 属性设置为 center 表示子元素水平居中。align-items 属性设置为 center 表示子元素垂直居中。.flex-item 类的margin属性用于设置子元素之间的间隔。