如何在CSS中使用flex进行2列布局？

Question

目前，我有2列的flex布局。但是问题是，我需要将左列的宽度设置为存在的最大最大左列的宽度。我该怎么办？

p {
    display: flex;
    display: -ms-flexbox;
    line-height: 2;
    align-items: flex-start;
    position: relative;
}

<div>
  <p>
    <span>Test 1</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test test test test test</span>
    <span>Content test test test</span>
  </p>
  <p>
    <span>Test test 2</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test blub</span>
    <span>abc</span>
  </p>
</div>

Answer 1

在您的HTML中：

<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>

在您的CSS中：

.row {
    display: flex;
}

.column {
    flex: 50%;
}

Bootstrap（4）通过使用行和列类名解决了此问题。

Answer 2

这是CSS表布局，而不是flexbox布局：

.table {
  display: table;
}

.table p {
  display: table-row;
  line-height: 2;
}

.table p span {
  display: table-cell;
}

<div class="table">
  <p>
    <span>Test 1</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test test test test test</span>
    <span>Content test test test</span>
  </p>
  <p>
    <span>Test test 2</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test blub</span>
    <span>abc</span>
  </p>
</div>