使第一要素全寬和一行

我試圖創造一種分格，看起來像這樣的其餘部分：使第一要素全寬和一行

的第一要素應該是全寬，其餘都爲在同一行中（每一個寬度相同），無論存在多少項目。

我嘗試：

HTML

<div class="flex-container"> 
    <div class="flex-item">I'm the biggest!</div> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
    <div class="flex-item"></div> 
</div>

CSS

.flex-container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.flex-container .flex-item { 
    flex: 1; 
} 

.flex-container .flex-item:first-child { 
    width: 100%; 
}

我在柔性新手，所以，在我的新手抽象，理論上這應該工作，但它沒有。它使所有的.flex-item正在與寬度相同（這是我想發生，但僅與:not(:first-child)柔性帥哥）在同一行。

來源

2017-08-02 Mithc

就個人而言，我將有更大的DIV坐在外面的柔性件中的較小的div坐。這就是我雖然。 – dbrree

您的代碼不一致。您的CSS具有與您的HTML元素不完全匹配的選擇器。 – VictorGodoi

@dbrree在這種情況下，我不能改變的HTML結構:( – Mithc

這將盡量保持你的所有下屬項目上一行。

見注在CSS

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.flex-container .flex-item { 
 
    background-color: #d94a6a; 
 
    flex: 1 1 0;          /* for 2nd line to not wrap */ 
 
    margin: 0 1px;             
 
    overflow: hidden;         /* for 2nd line to not wrap */ 
 
    min-height: 75px; 
 
    text-align: center; 
 
    -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5); 
 
    -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5); 
 
    box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5); 
 
} 
 

 
.flex-container .flex-item:nth-child(1) { 
 
    background-color: #3b5bb2; 
 
    flex-basis: 100%;         /* make first take full width */ 
 
    min-height: 400px; 
 
    margin-bottom: 20px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">I'm the biggest!</div> 
 
    <div class="flex-item">#2</div> 
 
    <div class="flex-item">#3</div> 
 
    <div class="flex-item">#4</div> 
 
    <div class="flex-item">#5</div> 
 
    <div class="flex-item">#6</div> 
 
    <div class="flex-item">#7</div> 
 
</div>

來源

2017-08-02 16:53:45 happymacarts

使第一要素全寬和一行

回答

相關問題