弹性盒子等分竖状排列一行

弹性盒子布局（Flexbox）是一种现代CSS布局模型，特别适合于创建响应式、灵活的网格系统。当你需要在一排元素中等分空间，并保持它们在不同屏幕尺寸下自动调整位置和大小时，可以使用 Flexbox 的 `flex-direction` 属性设置为 `column`（竖直方向），然后配合其他属性如 `justify-content` 和 `align-items` 来控制行内对齐。

例如，你可以这样做：

.container {
  display: flex;
  flex-direction: column; /* 竖直方向 */
  justify-content: space-between; /* 元素之间等间距分布 */
  align-items: center; /* 各元素居中对齐 */
}

在这个例子中，`.container` 中的所有子元素会按照从上到下的顺序等分垂直空间，并且每个元素顶部和底部与其他元素有一定距离。如果你想要改变行内的对齐方式，可以更改 `align-items` 的值，比如 `align-items: flex-start` 或 `align-items: flex-end`。

相关问题

两个同级的弹性盒子 实现表格布局

可以使用flex布局来实现表格布局，具体实现方法如下：

HTML结构：

<div class="table">
  <div class="row header">
    <div class="cell">表头1</div>
    <div class="cell">表头2</div>
    <div class="cell">表头3</div>
  </div>
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
    <div class="cell">内容3</div>
  </div>
  <div class="row">
    <div class="cell">内容4</div>
    <div class="cell">内容5</div>
    <div class="cell">内容6</div>
  </div>
</div>

CSS样式：

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}

.row {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
}

.header {
  font-weight: bold;
  background-color: #f0f0f0;
}

.cell {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

解释：

首先用一个大的容器来包含整个表格，设置为flex布局，并且flex-direction为column，这样子元素就会竖直排列。

每一行使用一个div容器来包含，也设置为flex布局，但是flex-direction为row，这样子元素就会水平排列。

表头使用一个特殊的类名.header来标识，以便于增加样式。

单元格使用一个div容器来包含，设置为flex: 1，表示等分剩余空间，padding: 10px，增加内边距，border: 1px solid #ccc，增加边框。

这样子就可以实现简单的表格布局了，通过调整样式可以实现更多的效果。