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值當它得到低於寬度將下拉，你在上面顯示。