js flex

// 使用 Flexbox 布局的简单示例

// HTML 结构
/*
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
*/

// CSS 样式
.container {
  display: flex; /* 启用 Flexbox 布局 */
  justify-content: space-between; /* 水平方向上的子元素分布 */
  align-items: center; /* 垂直方向上的对齐方式 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

/* 解释：
- `display: flex`：将容器设置为 Flexbox 布局，使子元素可以按照 Flexbox 规则排列。
- `justify-content: space-between`：水平方向上，子元素之间均匀分布，两端对齐。
- `align-items: center`：垂直方向上，子元素居中对齐。
- `.item` 类定义了每个子元素的样式，包括宽度、高度、背景颜色等。
*/