在 Flexbox 佈局中，在多行中保持一致的項目寬度可能具有挑戰性。但是，這可以透過 CSS 屬性的組合來實現，如下所述：
設定項目相對於其他物品。透過將其設為 1，每個項目都具有相同的成長潛力。
定義項目的初始大小。這決定了項目的最小寬度。
設定項目的最大寬度，確保它不會超過其所需的大小。
媒體查詢用於根據視口大小調整max-width 屬性，保持多個項目寬度的一致性
ul {
display: flex;
flex-wrap: wrap;
}
li {
max-width: 100px;
flex: 1 0 0;
}
@media (min-width: 200px) {
li {
max-width: 50%;
}
}
@media (min-width: 300px) {
li {
max-width: 33.33333%;
}
}此CSS 將每個項目的初始寬度設定為100px。然後，當視窗大小發生變化時，它使用媒體查詢來調整 max-width 屬性，確保項目即使在換行時也能保持所需的寬度。
更優雅的替代方案是利用flex-wrap-fix mixin:
@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
flex-grow: 1;
flex-basis: $flex-basis;
max-width: 100%;
$multiplier: 1;
$current-width: 0px;
@while $current-width < $max-viewport-width {
$current-width: $current-width + $flex-basis;
$multiplier: $multiplier + 1;
@media(min-width: $flex-basis * $multiplier) {
max-width: percentage(1/$multiplier);
}
}
}將mixin 套用到Flex項目：
.flex-item {
@include flex-wrap-fix(100px)
}此 mixin 實現與 CSS 媒體查詢相同的結果，但消除了需要消除重複程式碼並使維護更容易。
以上是換行後如何在 Flexbox 佈局中保持一致的項目寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
