フレックスボックス対応のレイアウト

Question

私はフレックスボックスで遊んでいて、ちょっとした助けが必要です。私は、大きな正方形の要素を左に、四つの小さい要素のグリッドを、最初のものと同じ大きさにしたい。

は、これまでのところ私はこれを持っている：

#flex { 
 
    display: flex; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-content: stretch; 
 
    flex-wrap: wrap; 
 
    margin-left: 10px; 
 
} 
 
.flex-item { 
 
    padding: 10px; 
 
    flex-basis: auto; 
 
    flex: 0 0 47%; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/DaveBatt83/pen/yVbGQG

スクリーンの幅を小さくすると4つの小さな要素が互いに上に積み重ね、なぜ私は理解していませんまた、大きなブレークポイントの最小幅を設定して、特定のブレークポイントで全幅を占めるようにしたいと思います。これは可能です

最初のアイテムが幅の47％を占めるようにしたい場合は、ネストされたコンテナを追加して、ネストされたコンテナ内の47％で2つのアイテムの2つの行を作成します。 47％はスペースを使ってそれらの間にいくらかの間隔を作ることです。

これはすべて動作するようですが、画面サイズを小さくすると2行2列が4項目の列になります。

Answer 1

わかりやすくするためにネストされたフレックスアイテムの名前を変更しました。おそらく、おそらくあなたは問題が発生していました。なぜなら、あなたにはbox-sizing: border-boxが足りなかったからです。

#flex { 
 
    display: flex; 
 
    background-color: peachpuff; 
 
    justify-content: space-between; 
 
} 
 
.flex-item, 
 
.flex-container-inner, 
 
.flex-item-inner { 
 
    flex: 0 0 47%; 
 
    box-sizing: border-box; 
 
} 
 
.flex-item, 
 
.flex-item-inner { 
 
    padding: 10px; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item-inner"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>