フレックスアイテムの幅を無視する

Question

フレックスボックスを使って、フレックスボックスを使用しているウェブサイトのいくつかの要素を整理しましたが、うまく機能するウェブサイトのデザインでは、要素のサイズが適切に変更されません。

ブレークポイントでは、home-promos divにflexのクラスを適用し、要素を並べ替えました。これは正しく動作します。

divのパーセンテージ幅のサイズを変更しようとすると、問題が発生します。 50％などの特定のポイントまでリサイズしてからはそれ以上大きくなりません。

フレックスボックスの方が自分自身よりも問題が何であるか教えていただけますか？

.home-promos { 
 
    display: flex; 
 
} 
 
.home-promo-center { 
 
    order: 1; 
 
} 
 
.home-promo-left { 
 
    order: 2; 
 
} 
 
.home-promo-right { 
 
    order: 3; 
 
}

<div class="home-promos"> 
 
    <div class="home-promo-left"> 
 
    <div class="promo-left-content"> 
 
     *content* 
 
    </div> 
 
    </div> 
 
    <div class="home-promo-center"> 
 
    <div class="promo-center-content"> 
 
     *content* 
 
    </div> 
 
    </div> 
 
    <div class="home-promo-right"> 
 
    <div class="promo-right-content"> 
 
     *content* 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはフレックスコンテナ（display: flexまたはdisplay: inline-flex）を作成すると、それはいくつかのデフォルト設定が付属しています。その中には：

• flex-direction: row - フレックス項目が整列する水平
• justify-content: flex-start - フレックス項目は、行の先頭にスタックします
• flex-wrap: nowrap - フレックス項目は、単一のラインに滞在することを余儀なくされている
• flex-shrink: 1 - フレックスアイテムは縮小できます

最後の2つの設定に注意してください。

あなたの3つのdivは1行にとどまります。したがって、それらの組み合わされた幅は容器の幅に制限される。

また、それらは収縮することが許され、それにより容器がオーバーフローすることが防止される。これにより、幅も制限されます。フレックスアイテムが新しい行に

flex-shrink: 0を破ることができるので、今より多くのスペースがあります - - 今より多くのがあります

1. flex-wrap: wrap：あなたはあなたがこれらの初期設定を上書きすることができ、各フレックス項目に好きな幅に適用するには

   フレックスアイテムは縮小せず、必要に応じてコンテナがオーバーフローする可能性があるため、スペースが必要です。