CSS flexbox：3列到2 + 1

Question

我目前正在使用<table>布局转换旧页面并尝试使用flexbox实现行为。目标是有3列，前两列水平和垂直居中，最后一列包含大量文本，显示正常。

我正在尝试使用媒体查询在浏览器宽度较小时将第三列包装在前两列下，如下所示：

下面的代码片段实现了正确的布局，但显然会在小宽度上失败，只生成一列：

我猜这个需要flex-wrap不知何故？

单个容器行也可以有多行吗？或者最好每行一个容器？<​​/ p>

.row {
    display: flex; 
    justify-content: center;
    padding: 5px;
    margin: 2px;
    border: 1px solid #000;
    font-size: 0.7em;
}

.col1, .col2, .col3 {
    background-color: #999;
    padding: 8px; 
    margin: 2px;
}

.col1, .col2 {
    flex: 1; 
    
    /* Horizontal centring */
    text-align: center;

    /* Add vertical centring */
    display: flex;
    flex-direction: column;
    justify-content:center;
}

.col3 {
    flex: 3;
    background-color:#fff;
}

@media(max-width: 400px){
    .row {display: block;}
}

<div class="row">
<div class="col1">
    Column 1
</div>
<div class="col2">
    Column 2
</div>
<div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
</div>
</div>

<div class="row">
<div class="col1">
    Column 1
</div>
<div class="col2">
    Column 2
</div>
<div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur. 
</div>
</div>

Answer 1

您可以提供.row定义flex-wrap: wrap;并为第3列设置min-width值。当它低于该宽度时，它将按照您上面的指示下拉。

Answer 2

你可以通过一些技巧去除row元素，特别是如果你事先知道col1和col2元素的宽度。请注意，col3元素的宽度非常人为：

＆＃13;

＆＃13;

.row {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  border: solid 1px red;
}
.col1,
.col2 {
  background-color: lightblue;
  padding: 10px;
  background-clip: content-box;
}
.col3 {
  flex-basis: calc(100% - 194px);
  padding: 5px;
}
.col1,
.col2,
.col3 {
  margin: 10px 0px;
}
.col1 {
  border: solid 1px black;
  border-right-width: 0px;
  margin-left: 10px;
}
.col2 {
  border: solid 1px black;
  border-left-width: 0px;
  border-right-width: 0px;
}
.col3 {
  border: solid 1px black;
  border-left-width: 0px;
}

＆＃13;

<div class="row">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

此外，正常布局的解决方案，包括col1和col2的40％flex-basis。它们应该是50％，但由于有一些边距和填充，因此偏低并且弹性增长可以补偿它

＆＃13;

＆＃13;

.row {
  display: flex;
  justify-content: center;
  padding: 5px;
  margin: 2px;
  border: 1px solid #000;
  font-size: 0.7em;
}
.col1,
.col2,
.col3 {
  background-color: #999;
  padding: 8px;
  margin: 2px;
}
.col1,
.col2 {
  flex: 1;
  /* Horizontal centring */
  text-align: center;
  /* Add vertical centring */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.col3 {
  flex: 3;
  background-color: #fff;
}
@media(max-width: 400px) {
  .row {
    flex-wrap: wrap;
  }
  .col1,
  .col2 {
    flex-basis: 40%;
  }
  .col3 {
    flex-basis: 80%;
  }
}

＆＃13;

<div class="row">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
</div>

<div class="row">
  <div class="col1">
    Column 1
  </div>
  <div class="col2">
    Column 2
  </div>
  <div class="col3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit tortor vel orci pulvinar, eu euismod sem maximus. Mauris tempus sem eget massa tristique, ut maximus tortor volutpat. In efficitur.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;