html - 两列 flex 布局，内容向中间对齐

Question

使用这段代码:

.row {
  display: flex;
  text-align: center;
}

.col {
  flex: 1;
}

<div class='row'>
  <div class='col'>
    <h1>Left</h1>
    <h2>Some longer text</h2>
  </div>
  <div class='col'>
    <h1>Right</h1>
    <h2>Some longer text</h2>
  </div>
</div>

我得到这样的输出

------------------------------------------------------------------
|            Left               |             Right              |
|       Some longer text        |       Some longer text         |
------------------------------------------------------------------

(虚线表示容器)。

我想要的是让每一列中的元素相对于彼此保持居中，但偏向于列分隔符，并带有一些填充，例如

------------------------------------------------------------------
|                 Left        |       Right                      |
|           Some longer text  |  Some longer text                |
------------------------------------------------------------------

我怎样才能做到这一点？

Answer 1

请查收附件fiddle

您可以使用 align-items: center 进行垂直居中对齐或然后进行水平对齐，在特定元素上使用 align-self 以 flex-start、flex-end 或 center。

只需在此处添加 css 代码。

.row {
  display: flex;
  margin: 0 -15px;
}

.col {
    flex: 1;
    flex-flow: column wrap;
    align-items: center;
    display: flex;
    padding: 0 15px;
}
.col:first-child h1,
.col:first-child h2{
align-self: flex-end;
}
.col:last-child h1,
.col:last-child h2{
align-self: flex-start;
}