已解決430363個問題，去搜搜看，總會有你想問的

Flex 項目繞行到下一行以減少容器的寬度

首頁猿問 Flex...

Flex 項目繞行到下一行以減少容器的寬度

Html5

慕桂英4014372 2023-10-17 15:51:47

以下是我的代碼，其中我希望 3 個.itemdiv 位于一行，接下來的 3 個 div 位于另一行。下面提到的代碼在普通屏幕上運行良好。但是一旦我減小瀏覽器的大小，兩個項目就會顯示在一行上。讓我知道我在這里做錯了什么，盡管我已將寬度添加到 33%，它應該可以容納它，但可能我在這里遺漏了一些東西。代碼 -:root { box-sizing: border-box; }.flex { display: flex; width: 100%; flex-wrap: wrap; }.item { flex: 0 1 33%; border: 1px solid red; }<div class="flex"> <div class="item">Flex Item 1</div> <div class="item">Flex Item 2</div> <div class="item">Flex Item 3</div> <div class="item">Flex Item 4</div> <div class="item">Flex Item 5</div> <div class="item">Flex Item 6</div></div>

查看完整描述

2 回答

烙印99

TA貢獻1829條經驗獲得超13個贊

通過添加box-sizing: border-box到您的項目，您將確保它們的寬度不會增長超過 33%。

如果沒有它，它們的寬度等于 33% + 1px + 1px。在某些時候，它將超過其父寬度的三分之一。

:root { box-sizing: border-box; }

.flex { display: flex; width: 100%; flex-wrap: wrap; }

.item { flex: 0 1 33%; border: 1px solid red; box-sizing: border-box; }

反對回復 2023-10-17

倚天杖

TA貢獻1828條經驗獲得超3個贊

- 添加box-sizing: border-box;項目將解決您的問題。

不過，另一種選擇是使用grid而不是flex. 這允許您使用該1fr單位，當將寬度平均分配到指定數量的列時，該單位會自動考慮填充和邊框大小等因素。

.grid {

? display: grid;

? grid-template-columns: repeat(3, 1fr);

}

.item {

? border: 1px solid red;

}

? <div class="item">Flex Item 1</div>

? <div class="item">Flex Item 2</div>

? <div class="item">Flex Item 3</div>

? <div class="item">Flex Item 4</div>

? <div class="item">Flex Item 5</div>

? <div class="item">Flex Item 6</div>

</div>

反對回復 2023-10-17

2 回答
0 關注
131 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Flex 項目繞行到下一行以減少容器的寬度

Flex 項目繞行到下一行以減少容器的寬度

2 回答

添加回答