フレックスボックス等高さ空白問題

Question

フレックスボックスに問題があります。私は、フレックスで等しい列を作成し、いくつかの列の高さが大きい場合、画像を持つ子divにはいくらかの空白があり、どこから来るのかわかりません。

私のコードからわかるように、赤い背景は.card-thumbに間違っています。どのようにそれを修正するには？ここで

は私のペンです：スタイルでhttp://codepen.io/woosaj/pen/bZjyRP

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row wrap; 
    background: rgba(2552,255,255,.1) 
} 

.column { 
    display: flex; 
    flex: 0 0 33.33333%; 
    padding-left: 0.3125rem; 
    padding-right: 0.3125rem; 
    max-width: 33.33333%; 

} 

.card { 
    background: #fff; 
    display: flex; 
    flex-flow: row wrap; 
    .card-thumb { 
     width: 100%; 
     background: red; 
    } 

} 

img { 
    max-width: 100%; 
    display: block; 
} 

Answer 1

フレックスコンテナの初期設定は、align-content: stretchです。

これは、フレックスコンテナ内の複数の行が、コンテナのサイズを満たすように展開されることを意味します。

コンテナがflex-direction: rowであり、flex-wrap: wrapを有効にしているため、align-contentプロパティはラップされたアイテムを垂直方向（cross-axisに沿って）に配信します。

stretchデフォルトでは、赤い背景のdivは、コンテナの高さを埋めるために兄弟に対して相対的に拡大しています。 （すべてのフレックスアイテムに背景色を追加すると、コンテナがいっぱいになっていることがわかります）

代わりに、align-content: flex-startまたはspace-betweenを使用してください。あなたが直面するだろう

---

次の問題は.bottomはもはやalign-self: flex-endを尊重するということではありません。

この問題に対処するには、コンテナのflex-directionをcolumnに、margin-top: autoを.bottomに変更することをおすすめします。詳細：

• Why isn't align-self aligning my div to the bottom of my flexbox?
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
• Align an element to bottom with flexbox

Answer 2

flex:1;にdisplay:flex;を変更.card。これはあなたを助けるでしょう。

body { 
    background: #000; 
} 

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row wrap; 
    background: rgba(2552,255,255,.1) 
} 

.column { 
    display: flex; 
    flex: 0 0 33.33333%; 
    padding-left: 0.3125rem; 
    padding-right: 0.3125rem; 
    max-width: 33.33333%; 

} 

.card { 
    background: #fff; 
    flex:1; 
    flex-flow: row wrap; 
    .card-thumb { 
     width: 100%; 
     background: red; 
    } 

} 

img { 
    max-width: 100%; 
    display: block; 
}