CSS flexbox：将3列转换为2 + 1

Question

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

我试图用一个媒体查询包裹下的前两个第三列，当浏览器的宽度很小如下：

下面的代码片段实现了正确的布局，但会显失败的小宽度，只是生产单柱：

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

对于单个容器行，多行也可行吗？或者每行最好有一个容器？

.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

你可以用一些技巧去除行元素，特别是如果事先知道col1和col2元素的宽度。注意COL3元件的宽度是相当人为：

.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; 
 
}

<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>

另外，对于正常布局的解决方案，包括对col1和COL2 40％挠曲基础。他们应该是50％，但由于有一些边距和补，最好是偏低和柔性长出补偿它

.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%; 
 
    } 
 
}

<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 2

你会为你的.row定义flex-wrap: wrap;并设置列3. min-width值当它得到低于宽度将下拉，你在上面显示。