簡單的css3 flex佈局將垂直 - 不跨越

我有問題讓我的css flexbox佈局工作。我希望能夠在1170像素上獲得4個盒子，但是我得到了垂直佈局。我在IE11 maxathon進行了測試，而Chrome簡單的css3 flex佈局將垂直 - 不跨越

這裏的HTML

.textwidget { 
 
    width: 100%; 
 
    background-color: orange; 
 
} 
 
.ec-postcards { 
 
    width: 1170px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: space-around; 
 
} 
 
.postcard-block { 
 
    width: 20%; 
 
    background: pink; 
 
}

<aside class="home-postcards"> 
 
    <div class="ec-postcards"> 
 
    <div class="textwidget"> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <!-- ec-postcards--> 
 
    </div> 
 
</aside>

來源

2016-03-20 maxelcat

好吧，我似乎已經解決了它，但將flex css移動到文本小部件上......這讓我感到奇怪？ – maxelcat

您設置flex到錯誤的元素。應該把它放在你試圖設置的項目的直接父母旁邊。 textwidget是明信片塊的父親，因此應該將其設置爲flex。

.textwidget { 
 
    width: 100%; 
 
    background-color: orange; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    justify-content: space-around; 
 
} 
 
.ec-postcards { 
 
    width: 1170px; 
 
    margin: 0 auto; 
 
} 
 
.postcard-block { 
 
    width: 20%; 
 
    background: pink; 
 
}

<aside class="home-postcards"> 
 
    <div class="ec-postcards"> 
 
    <div class="textwidget"> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
     <div class="postcard-block "> 
 
     <img src="wp-content/uploads/2016/03/alcove-units.jpg" alt="" /> 
 
     <p><a href="living">living</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <!-- ec-postcards--> 
 
    </div> 
 
</aside>

來源

2016-03-20 19:02:41

是的 - 我剛剛看到您在添加我的同時添加了該選項。感謝您的回答 – maxelcat

設置直接父顯示：彎曲;

<div class="textwidget ec-postcards">

來源

2016-03-20 19:12:57

簡單的css3 flex佈局將垂直 - 不跨越

回答

相關問題