3列Flexbox在某些小型設備上不能正確堆疊

Question

首先，我是業餘愛好者 - 希望您能原諒！我試圖實現3列Flexbox佈局（我選擇這隻適用於相同高度的div），它可以自動堆疊在小型設備上。我嘗試了所有我能想到的，但結果是前兩個div列保持在同一行上，而第三個div列換行到下一行。我添加了第四個孩子到CSS，因爲我最初想要4列，但刪除這對我的問題沒有任何影響。我讀過負載，似乎無法找到答案。也許有人在那裏有類似的問題？

這是CSS：

.flexbox { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; 

} 


.flexbox .col { 
    flex: 1; 
    margin: 10px; 
} 

.flexbox .coltext { 
    flex: 1; 
    padding: 15px; 
    margin: 10px; 
    background: #fff; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 

} 
.flexbox .col:nth-child(1) { 
    background: #fff; 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 
.flexbox .col:nth-child(2) { 
    background: #fff; 
    -webkit-order: 1; 
    -ms-flex-order: 1; 
    order: 1; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 
.flexbox .col:nth-child(3) { 
    background: #fff; 
    -webkit-order: 2; 
    -ms-flex-order: 2; 
    order: 2; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 

.flexbox .col:nth-child(4) { 
    background: #fff; 
    -webkit-order: 3; 
    -ms-flex-order: 3; 
    order: 3; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 


@media (max-width: 480px) { 
    #container div { 
     max-width: 98%; 
    } 
} 
@media (min-width: 480px) and (max-width: 1080px) { 
    #container div { 
     max-width: 48%; 
    } 
} 
@media (min-width: 1080px) { 
    #container div { 
     max-width: 23%; 
    } 
} 

這是HTML（移除了描述性文本）：

<div class="flexbox"> 
    <div class="col"> 
    <img src="images/homepage_images/OVERHEAD (4).jpg" style="width:100%"><br><br> 
     <h5><center><strong>Bournemouth Town Centre regeneration</strong></center></h5> 
    <p class="justify text-justify w3-padding"> 
<br><br> 
    <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
    </div> 


    <div class="col"> 
    <img src="images/homepage_images/Poundstock.jpg" style="width:100%"><br><br> 
    <h5><center><strong>contract awards</strong></center></h5> 
     <p class="justify text-justify w3-padding"> <br><br> 
     <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
    </div> 



    <div class="col"> 
    <img src="images/homepage_images/_MG_0342rawprepx.jpg" style="width:100%"><br><br> 
     <h5><center><strong>latest from General Works</strong></center></h5> 
     <p class="justify text-justify w3-padding"> 
    <br><br> <a class="w3-btn w3-red w3-medium" href="#">view</a></p></div> 
</div> 

Answer 1

一種簡單的方式來實現所期望的效果將是flex-direction到設定column：

@media (max-width: 480px) { 
    #container div { 
     max-width: 98%; 
    } 
    .flexbox { 
    flex-direction: column; 
    } 
} 

SNIPPET （收縮輸出窗口）

.flexbox { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 

 
} 
 

 

 
.flexbox .col { 
 
    flex: 1; 
 
    margin: 10px; 
 
} 
 

 
.flexbox .coltext { 
 
    flex: 1; 
 
    padding: 15px; 
 
    margin: 10px; 
 
    background: #fff; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 

 
} 
 
.flexbox .col:nth-child(1) { 
 
    background: #fff; 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(2) { 
 
    background: #fff; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(3) { 
 
    background: #fff; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 
.flexbox .col:nth-child(4) { 
 
    background: #fff; 
 
    -webkit-order: 3; 
 
    -ms-flex-order: 3; 
 
    order: 3; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 

 
@media (max-width: 480px) { 
 
    #container div { 
 
     max-width: 98%; 
 
    } 
 
    .flexbox { 
 
    flex-direction: column; 
 
    } 
 
} 
 
@media (min-width: 480px) and (max-width: 1080px) { 
 
    #container div { 
 
     max-width: 48%; 
 
    } 
 
} 
 
@media (min-width: 1080px) { 
 
    #container div { 
 
     max-width: 23%; 
 
    } 
 
}

<div class="flexbox"> 
 
    <div class="col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="width:100%"><br><br> 
 
     <h5><center><strong>Bournemouth Town Centre regeneration</strong></center></h5> 
 
    <p class="justify text-justify w3-padding"> 
 
<br><br> 
 
    <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
 
    </div> 
 

 

 
    <div class="col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="width:100%"><br><br> 
 
    <h5><center><strong>contract awards</strong></center></h5> 
 
     <p class="justify text-justify w3-padding"> <br><br> 
 
     <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
 
    </div> 
 

 

 

 
    <div class="col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="width:100%"><br><br> 
 
     <h5><center><strong>latest from General Works</strong></center></h5> 
 
     <p class="justify text-justify w3-padding"> 
 
    <br><br> <a class="w3-btn w3-red w3-medium" href="#">view</a></p></div> 
 
</div>