ネストされたフレックスボックスラッピング問題

The difference between flex:1 and flex-grow:1とは異なります。答えは最終的にはフレックスの代わりにフレックスを使用していましたが、私の質問は2つの違いではなく、ネストされたフレックスボックスを適切に折り返す方法でした。この問題に苦労している人にとっては、その問題を知らずにその答えを見つける方法がなくなるでしょう。フレックスとフレックス・グロースの違いが問題だったことがすでにわかっていれば、私はその質問をする必要はありませんでした。ネストされたフレックスボックスラッピング問題

編集2 この記事は、重複としてフラグ付けされようとしている場合、代わりにフレックスとの間の差のNested column flexbox inside row flexbox with wrappingの重複としてそれをリストする方が良いでしょう：1とFlex-育つ：1。

display:flexと定義されている一連のdivタグがあります。それらは3列の行としてレイアウトされています。最初の2つの列には幅が割り当てられ、3つ目の列には残りの領域を満たすためにストレッチが許されます。小さい画面では、3番目の列が他の2つの列の下に折り返されるように、行も折り返しに設定されます。

style.cssに

.flex-row { 
    display: flex; 
    flex-direction: row; 
    flex-grow: 1; 
} 

.flex-column { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    border: 1px solid lightgray; 
} 

.box { 
    display: flex; 
    height: 100px; 
    width: 300px; 
    min-width: 200px; 
    flex-shrink: 1; 
    border: 1px solid green; 
}

index.htmlを

<div class="flex-row" style="flex-wrap:wrap"> 
    <div class="flex-column" style="flex-grow:0"> 
     Column 1 
    </div> 

    <div class="flex-column" style="flex-grow:0;width:200px"> 
    Column 2 
    </div> 

    <div class="flex-column"> 
    <div class="flex-row" style="min-width:500px;flex-wrap:wrap"> 
     <div class="box">Box 1</div> 
     <div class="box">Box 2</div> 
     <div class="box">Box 3</div> 
     <div class="box">Box 4</div> 
     <div class="box">Box 5</div> 
     <div class="box">Box 6</div> 
     <div class="box">Box 7</div> 
    </div> 
    </div> 
</div>

（see my plnk here）：ここ

は、いくつかの基本的なサンプルコードです。

最後の列には一連の「ボックス」を持つフレックス行が含まれています（例を参照）。

スクリーンがサイズ変更されると、3番目の列はすべてのボックスが単一の列にあり、ボックスが最小幅に縮小された点まで縮小され続けます。この時点で、画面幅がさらに縮小されると、3番目の列が他の2つの列の下に折り返され、できるだけ多くのボックスを並び替えるように展開されます。

実際に起こっているように見えるのは、3番目の列が最初にラップしてから、その内容に含まれる内容をラップすることです。

ここに私が見たいと思っているものの視覚的な画像があります。

はフレキシボックスで行うことが、このことは可能ですか？もしそうなら、私は間違って何をしていますか？

出典

2017-12-06 RHarris

、それは、ときに3番目の列につながるので、内容を考慮しない幅を0に3列の_flex-basis_を設定しますので、与えられた答えの仕事がある理由_min-width_に達したら、折り返します。コードサンプルのサイズを十分に変更すると、ボックスが折り返される前に列がオーバーフローすることがわかります。通常のラップオーダーは、最も外側の子供から始まり、内側に向かって作業するので、これを達成するための適切な解決策にはメディア照会が必要です。 – LGSon

私は、受け入れられた回答が私が探していた結果を提供したが、フレックスの仕組みに関して誤解を招くような情報を提供していることは認めている。しかし、私が編集2で指摘した解決策は、Michael_Bによって提案されたものとは対照的に、私の質問と重複することに近いと思います。 – RHarris

自分自身で自由に参照することができます：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

ここがあなたの望みです。 flex-columnについては

ではなくflex-grow:1;のflex: 1;すべきであり、それにmin-widthを設定する：あなたは変更する必要がありますどのような。このようにして、両方を成長させ、縮小することができます。 flex-grow:1を使用して

は縮小し、あなたは、ビューポートのサイズが変更されたとして、それは柔軟である必要があり、最初のコンテナすなわちフレックス行のフレックス列クラスを使用しているので、成長ではなく、へのコンテナを制限します。

/* Styles go here */ 
 

 
.flex-row { 
 
    display: flex; 
 
    flex-direction: flex-row; 
 
    flex-grow: 1; 
 
} 
 

 
.flex-column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-width:100px; 
 
    flex: 1; 
 
    border: 1px solid lightgray; 
 
} 
 

 
.box { 
 
    display:flex; 
 
    flex-shrink:1; 
 
    border: 1px solid green; 
 
    height:100px; 
 
    width:300px; 
 
    min-width:150px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="flex-row" style="flex-wrap:wrap"> 
 
     <div class="flex-column" style="flex-grow:0"> 
 
      Column 1 
 
     </div> 
 
     
 
     <div class="flex-column" style="flex-grow:0;width:200px"> 
 
     Column 2 
 
     </div> 
 
     
 
     <div class="flex-column"> 
 
     <div class="flex-row" style="min-width:500px;flex-wrap:wrap"> 
 
      <div class="box">Box 1</div> 
 
      <div class="box">Box 2</div> 
 
      <div class="box">Box 3</div> 
 
      <div class="box">Box 4</div> 
 
      <div class="box">Box 5</div> 
 
      <div class="box">Box 6</div> 
 
      <div class="box">Box 7</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

さらに

出典

2017-12-06 15:02:07

パーフェクト！ありがとう。それはあまりにも簡単だった - 私はそれを逃したとは信じられない。 – RHarris

@RHarris問題はありません:) –

_「flex-grow：1を使用すると、コンテナは成長するだけで収縮は制限されません」と言ったとき_それは得られる限り間違っていますが、明らかにその違いを理解しません。たぶんあなたはここで見てみるべきです：https://stackoverflow.com/questions/45767405/the-difference-between-flex1-and-flex-grow1 – LGSon

ネストされたフレックスボックスラッピング問題

答えて

関連する問題