如何使用 flexbox 进行两列布局？答案

【问题标题】：how to make two column layout using flexbox?如何使用 flexbox 进行两列布局？
【发布时间】：2018-01-13 10:44:36
【问题描述】：

我正在尝试使用display: flex 进行两列布局。我想显示两列相等的width 和height（内容更多的最大高度）。

这是我的代码。 https://jsbin.com/wataripuzu/edit?html,output

.row {
  display: flex;
}

<section class="row">
  <div class="left">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
  <div>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
</section>

【问题讨论】：

标签： jquery html css flexbox

【解决方案1】：

您只需要设置word-break: break-all，因为这些数字被认为是一个长单词，默认情况下将保留在一行中。

.row {
  display: flex;
}
.row > div {
  word-break: break-all;
  border: 1px solid black;
  flex: 1;
}

<section class="row">
  <div class="left">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
  <div>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
</section>

【讨论】：