Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencapai Lebar Konsisten untuk Item Flex Balut dalam Reka Letak Flexbox?
Dalam susun atur flexbox, item flex biasanya mematuhi yang ditentukan lebar minimum dan maksimum. Walau bagaimanapun, apabila item flex dibalut ke baris baharu, ia cenderung untuk mengembang untuk menduduki ruang yang tersedia, mengakibatkan lebar tidak konsisten antara item pada baris yang berbeza.
Walaupun tiada penyelesaian langsung untuk isu ini dalam spesifikasi CSS, penyelesaian boleh dicapai menggunakan pertanyaan media.
SCSS 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); } } }
Penggunaan:
Sapukan mixin pada setiap item flex:
.flex-item { @include flex-wrap-fix(100px) }
Campuran ini menjana satu siri pertanyaan media berdasarkan asas flex yang ditentukan bagi item flex. Setiap pertanyaan media mengira lebar maksimum item fleksibel untuk lebar port pandangan yang diberikan dengan membahagikan 100% dengan bilangan item fleksibel yang sesuai pada baris tersebut.
Dalam sesetengah kes, lebar bekas flex mungkin tidak sepadan dengan lebar port pandang. Untuk menangani perkara ini, versi mixin yang dikemas kini boleh digunakan pada bekas flex:
@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) { display: flex; flex-wrap: wrap; > * { max-width: 100%; flex-grow: 1; flex-basis: $flex-basis; } $multiplier: 1; $current-width: 0px; @while $current-width < $max-expected-width { $current-width: $current-width + $flex-basis; $multiplier: $multiplier + 1; &[min-width~="#{$flex-basis * $multiplier}"] > * { max-width: percentage(1/$multiplier); } } }
Penggunaan:
Sapukan mixin pada bekas flex:
.flex-container { @include flex-container-wrap-items(100px) }
Contoh CodePen yang diubah suai boleh ditemui di sini:
http://codepen.io/anon/pen/aNVzoJ
Atas ialah kandungan terperinci Bagaimana untuk Mencapai Lebar Konsisten untuk Item Flex Balut dalam Reka Letak Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!