html - 如何在 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>

标签： htmlcssflexbox

Answer 1

在您的 HTML 中：

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

在你的 CSS 中：

.row {
    display: flex;
}

.column {
    flex: 50%;
}

Bootstrap (4) 通过使用 row 和 col 类名解决了这个问题。