Flexbox - 連續兩列
[英]Flexbox - Two column in a row
問題描述
我正在嘗試使用 flexbox 為產品創建兩列三行。 我在 StackOverflow 上查看了其他類似的問題，但給出的答案對我不起作用。 請問你能幫幫我嗎 ？ 這里的 HTML 代碼：
Informations { list-style-type: none; margin: 0; padding: 0; border: 1px solid blue; width: 100%; display: flex; justify-content: space-between; } .Information { border: 1px solid blue; margin: 0.5em; padding: 0.5em; } Game { list-style-type: none; border: 1px solid red; width: 100%; display: flex; } .ProductContainer { display: flex; flex-flow: column wrap; border: 1px solid black; width: 90%; } .Product { border: 1px solid red; margin: 0.5em; padding: 0.5em; } .UpgradeContainer { border: 1px solid black; width: 10%; } .Upgrade { display: flex; flex-flow: column wrap; border: 1px solid red; margin: 0.5em; padding: 0.5em; }
<!DOCTYPE world> <html> <head> <title> World </title> </head> <body> <Informations> <div class="Information">Your World:</div> <div class="Information">Your Money:</div> <div class="Information">Your ID:</div> </Informations> <Game> <div class="UpgradeContainer"> <div class="Upgrade">Unlocks</div> <div class="Upgrade">Cash</div> <div class="Upgrade">Angels</div> <div class="Upgrade">Managers</div> <div class="Upgrade">Investors</div> </div> <div class="ProductContainer"> <div class="Product">Product1</div> <div class="Product">Product2</div> <div class="Product">Product3</div> <div class="Product">Product4</div> <div class="Product">Product5</div> <div class="Product">Product6</div> </div> </Game> </body> </html>
我基本上想要左邊我的升級（現金，天使......）和中間和右邊兩列三行產品。 這是我的代碼筆： https : //codepen.io/Tameiki/pen/oNXpNVe
1 個解決方案
解決方案1
4 2020-03-10 07:42:00
您可以將flex-wrap屬性與在子元素上設置flex-basis一起使用：
.ProductContainer{ display: flex; flex-flow: wrap; border: 1px solid black; width: 90%; } .Product { border: 1px solid red; margin: 0.5em; padding: 0.5em; flex-basis: calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/ }
<div class="ProductContainer"> <div class="Product">Product1</div> <div class="Product">Product2</div> <div class="Product">Product3</div> <div class="Product">Product4</div> <div class="Product">Product5</div> <div class="Product">Product6</div> </div> 請注意我如何刪除flex-direction:column屬性：子元素將嘗試放入一行，必要時會溢出容器。
.ProductContainer{ display: flex; /*flex-flow: wrap;*/ border: 1px solid black; width: 90%; } .Product { border: 1px solid red; margin: 0.5em; padding: 0.5em; /*flex-basis: calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/ }
<div class="ProductContainer"> <div class="Product">Product1</div> <div class="Product">Product2</div> <div class="Product">Product3</div> <div class="Product">Product4</div> <div class="Product">Product5</div> <div class="Product">Product6</div> </div> flex-wrap是使它們開始一個新行而不是溢出的原因：
.ProductContainer{ display: flex; flex-flow: wrap; border: 1px solid black; width: 90%; } .Product { border: 1px solid red; margin: 0.5em; padding: 0.5em; /*flex-basis: calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/ }
<div class="ProductContainer"> <div class="Product">Product1</div> <div class="Product">Product2</div> <div class="Product">Product3</div> <div class="Product">Product4</div> <div class="Product">Product5</div> <div class="Product">Product6</div> </div>但是我們如何每行只得到兩個呢？ 通過告訴每個子元素是行寬的一半：
.ProductContainer{ display: flex; flex-flow: wrap; border: 1px solid black; width: 90%; } .Product { border: 1px solid red; margin: 0.5em; padding: 0.5em; flex-basis: 50%; /*calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/ }
<div class="ProductContainer"> <div class="Product">Product1</div> <div class="Product">Product2</div> <div class="Product">Product3</div> <div class="Product">Product4</div> <div class="Product">Product5</div> <div class="Product">Product6</div> </div> 不幸的是， flex-basis適用於元素的內部寬度 - 包括填充，但不包括邊距和邊框。 通常，如果可能，Flexbox 會嘗試縮小子元素以適應行，但flex-wrap禁用了此功能，因此我們必須手動調整。 這會讓你看到頂部的代碼。
Flexbox行在flexbox列中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.