弹性布局 flex layout HTML CSS

弹性布局（Flexible Box Layout），简称Flexbox，是CSS3新引入的一种布局方式。Flex布局能为硬件加速CSS3动画提供基础支持，并且能简便有效地创建复杂的布局结构。

以下是一个简单的HTML和CSS代码示例，展示如何使用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: 100vh; /* 容器高度设置为视口高度 */
}
 
.flex-item {
  width: 100px; /* 每个项目的宽度 */
  height: 100px; /* 每个项目的高度 */
  text-align: center; /* 文字居中 */
  line-height: 100px; /* 行高与高度相同，实现垂直居中 */
}

这个例子中，.flex-container 类使用了 display: flex 属性来指定使用Flex布局。.flex-item 类则定义了每个子项的尺寸和文本对齐方式。通过这种方式，三个 .flex-item 子元素会在 .flex-container 容器内水平分布，并且它们的内部文本垂直居中。