防止彎曲包裝3：1案例

對不起，我不知道如何寫出正確的問題。但這裏是我想解決的問題：防止彎曲包裝3：1案例

如果容器有4個項目，並且每個項目都有Flex：1 - >那麼它將通過順序排列項目：1行4項 - > 2行第1行3個項目，第2行1個大項目---> 2行2個項目--->和4行。

有沒有什麼辦法可以防止案件'2行，3行1行1大行2'？（第二種情況）

同一案件與6個項目，8個項目，......等容器....

這裏的例子：

謝謝非常。

來源

2017-01-23 Lan Mai

呃...你能模擬一個圖形表示你的意思嗎？有些人可能會發現你的行/項目組合清單是......好，令人困惑。 – Serlite

嗨，我添加了一張照片作爲問題的例子。 :) –

啊，這有助於清理一些細節 - 你能提供一段代碼來重現這種情況嗎？如果包含[mcve]，那麼爲問題提出解決方案要容易得多。 – Serlite

最簡單，最優雅的解決方案可能是包裹沒有flex-wrap: wrap;在單獨的柔性容器每兩個項目：

.flex-outer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
/* no row-wrapping here */ 
 
/* just leave it with default flex-wrap: nowrap */ 
 
.flex-inner { 
 
    display: flex; 
 
} 
 

 
/* Just styles for demo */ 
 
.flex-item { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: orange; 
 
    color: white; 
 
    font-size: 3rem; 
 
}

<div class="flex-outer"> 
 
    <div class="flex-inner"> 
 
    <div class="flex-item"> 
 
     One 
 
    </div> 
 
    <div class="flex-item"> 
 
     Two 
 
    </div> 
 
    </div> 
 
    <div class="flex-inner"> 
 
    <div class="flex-item"> 
 
     Three 
 
    </div> 
 
    <div class="flex-item"> 
 
     Four 
 
    </div> 
 
    </div> 
 
</div>

如果您希望項目承擔所有剩餘空間，爲.flex-item和.flex-inner設置flex: 1;。

來源

2017-01-23 23:13:01

謝謝你的回答。我目前正在測試它。謝謝！ –

我以這種方式實現了你所需要的... 首先，我將flex聲明應用於包裝圖像的div。

<div class="wrap"> 

    <p>picture</p> 
    <p>picture</p> 
    <p>picture</p> 
    <p>picture</p> 

</div> 

.wrap { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-flow: wrap; 
    -webkit-flex-flow: wrap; 
    flex-flow: wrap; 
}

然後我使用flex屬性，它是flex的縮寫：（flex-grow）（flex-shrink）（flex-basis）。請注意，flex-basis設置爲50％。這意味着元素將佔據視口的一半。

.wrap p { 
    flex: 0 0 50%; 
    -webkit-flex: 0 0 50%; 
    -ms-flex: 0 0 50%; 
}

來源

2017-01-23 23:05:10 Vcasso

謝謝你的回答。我目前正在測試它。謝謝！ –

防止彎曲包裝3：1案例

回答

相關問題