最初の要素全幅と、私はこのようになりますサブグリッドのようなものを作成しようとしている

Question

1行の残りの部分を作りますいくつのアイテムが存在しても、同じ行（それぞれ同じ幅）で表示されます。

私の試み：

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)のflex dudesのみで）。

Answer 1

これは、すべての下位項目を1つの行に保存しようとします。

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