Flexbox響應式佈局對齊

使用Flexbox正確響應佈局會有一些麻煩。Flexbox響應式佈局對齊

想象一下僅包含一些面板的頁面。目標是顯示x數量的面板/行，與其他行垂直對齊的水平面&。

問題我目前面臨的是面板從行切換時的對齊方式。試圖將面板直接對齊上面的面板，但這根本不能解決問題。

我的結果至今：

桌面

平板（在這裏你會看到對齊問題（我應該是正下方左上角之一。 ..））

電話

代碼（簡體）

<div class="container"> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
</div>

.container { 
    display: flex; 
    flex-flow: row wrap; 
    max-width: 960px; 
    justify-content: space-around; 

    .item { 
    margin-top: 24px; 
    width: 264px; 
    height: 183px; 
    background: red; 
    } 
}

來源

2016-09-14 Jim Vercoelen

嘗試justify-content: space-between;而不是space-around對於.container

來源

2016-09-14 22:42:08 Johannes

嘿，謝謝你幫我出來。我可以與它合作！ –

Flexbox響應式佈局對齊

回答

相關問題