Untuk mengatur jarak minimal antara item-item flexbox yang saya gunakan margin: 0 5px
di .item
dan margin: 0 -5px
di wadah. Bagi saya, ini seperti retasan, tetapi saya tidak dapat menemukan cara yang lebih baik untuk melakukan ini.
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
row-gap: 5px
- selesai.gap
properti pada wadah fleksibel ( caniuse )Jawaban:
border-spacing
tabel (kecuali untuk properti CSSgap
yang tidak didukung dengan baik di sebagian besar peramban, caniuse )Karena itu, mencapai apa yang Anda minta sedikit lebih sulit.
Dalam pengalaman saya, cara "terbersih" yang tidak menggunakan
:first-child
/:last-child
dan berfungsi tanpa modifikasi apa punflex-wrap:wrap
adalah dengan memasangpadding:5px
wadah danmargin:5px
anak-anak. Itu akan menghasilkan10px
kesenjangan antara setiap anak dan antara setiap anak dan orang tua mereka.Demo
sumber
order
properti diatur?:first-child/:last-child
tidak akan berfungsi seperti yang diharapkan.Ini bukan hack. Teknik yang sama juga digunakan oleh bootstrap dan grid-nya, meskipun, bukannya margin, bootstrap menggunakan padding untuk cols-nya.
sumber
height:100%; width:100%
mengabaikan bantalan item.flex-basis
tidak diperhitungkanbox-sizing: border-box
, sehingga anak dengan bantalan atau batas apa pun akan melimpahi induknya (atau membungkus dalam kasus ini). SumberFlexbox dan css calc dengan dukungan beberapa baris
Halo, di bawah ini adalah solusi kerja saya untuk semua browser yang mendukung flexbox. Tidak ada margin negatif.
Demo biola
Perhatikan kode ini bisa lebih pendek menggunakan SASS
Perbarui 2020.II.11 Kolom selaras di baris terakhir ke kiri
Perbarui 2020.II.14 Margin-bottom dihapus di baris terakhir
sumber
justify-content
.justify-content: space-evenly;
ataujustify-content: space-around;
.Anda dapat menggunakan batas transparan.
Saya telah merenungkan masalah ini ketika mencoba membangun model grid fleksibel yang dapat mundur ke model tabel + sel-tabel untuk browser yang lebih lama. Dan Borders untuk talang kolom bagi saya merupakan pilihan terbaik yang tepat. yaitu sel-tabel tidak memiliki margin.
misalnya
Perhatikan juga bahwa Anda memerlukan
min-width: 50px;
flexbox. Model fleksibel tidak akan menangani ukuran tetap kecuali Anda melakukannyaflex: none;
pada elemen anak tertentu yang Anda inginkan sebagai tetap dan karena itu tidak disertakan"flexi"
. http://jsfiddle.net/GLpUp/4/ Tetapi semua kolom bersama denganflex:none;
tidak lagi menjadi model fleksibel. Berikut adalah sesuatu yang lebih dekat dengan model fleksibel: http://jsfiddle.net/GLpUp/5/Jadi Anda benar-benar dapat menggunakan margin secara normal jika Anda tidak membutuhkan fallback sel tabel untuk browser lama. http://jsfiddle.net/GLpUp/3/
Pengaturan
background-clip: padding-box;
akan diperlukan saat menggunakan latar belakang, karena jika tidak latar belakang akan mengalir ke area perbatasan transparan.sumber
background-clip: padding-box
Solusi ini akan bekerja untuk semua kasus bahkan jika ada beberapa baris atau sejumlah elemen. Tetapi hitungan bagian harus sama dengan yang Anda inginkan 4 di baris pertama dan 3 adalah baris kedua tidak akan berfungsi dengan cara itu ruang untuk konten ke-4 akan kosong, wadah tidak akan mengisi.
Kami menggunakan
display: grid;
dan sifat-sifatnya.Kelemahan dari metode ini adalah di Mobile Opera Mini tidak akan didukung dan di PC ini hanya berfungsi setelah IE10 .
Catatan untuk kompatibilitas browser lengkap termasuk IE11 silakan gunakan Autoprefixer
JAWABAN TUA
Jangan menganggapnya sebagai solusi lama, itu masih salah satu yang terbaik jika Anda hanya ingin satu baris elemen dan itu akan bekerja dengan semua browser.
Metode ini digunakan oleh kombinasi saudara CSS , sehingga Anda dapat memanipulasinya dengan banyak cara lain juga, tetapi jika kombinasi Anda salah, itu dapat menyebabkan masalah juga.
Kode di bawah ini akan melakukan triknya. Dalam metode ini, tidak perlu memberi
margin: 0 -5px;
kepada#box
pembungkus.Sampel yang berfungsi untuk Anda:
sumber
grid-template-columns
kita tentukan tidak secara dinamis. Jadi jika Anda memberi nilai untuk1fr 1fr 1fr 1fr
itu akan membagi div menjadi4fractions
dan mencoba untuk mengisi elemen anak di masing-masingfractions
, setahu saya itulah satu-satunya caragrid
. Apa yang telah saya nyatakan dalam jawaban adalah bahwa jika pengguna perlu membagi div menjadi 4 dan menggunakannya dengan banyak elemen bahkan untuk beberapa baris,gid
akan membantu.Anda dapat menggunakan
& > * + *
sebagai pemilih untuk meniruflex-gap
(untuk satu baris):Jika Anda perlu mendukung pembungkus fleksibel , Anda dapat menggunakan elemen pembungkus:
sumber
*
operator tidak meningkatkan spesifisitas seperti yang Anda harapkan. Jadi tergantung pada css Anda yang ada, Anda mungkin perlu meningkatkan spesifisitas pada.flex > *
pemilih atau menambah!important
aturan jika ada pemilih lain yang menerapkan margin pada elemen itu.Katakanlah jika Anda ingin mengatur
10px
ruang di antara item, Anda bisa mengatur.item {margin-right:10px;}
untuk semua, dan mengatur ulang item yang terakhir.item:last-child {margin-right:0;}
Anda juga dapat menggunakan saudara umum
~
atau+
pemilih saudara berikutnya untuk menetapkan margin kiri pada item tidak termasuk yang pertama.item ~ .item {margin-left:10px;}
atau digunakan.item:not(:last-child) {margin-right: 10px;}
Flexbox sangat pintar sehingga secara otomatis menghitung ulang dan mendistribusikan grid secara merata.
Jika Anda ingin mengizinkan bungkus fleksibel , lihat contoh berikut.
sumber
:last-child
tidak memengaruhi setiap anak terakhir di akhir baris, benar?Saya telah menemukan solusi yang didasarkan pada pemilih saudara umum
~
,, dan memungkinkan bersarang tanpa batas.Lihat pena kode ini untuk contoh yang berfungsi
Pada dasarnya, di dalam wadah kolom, setiap anak yang didahului oleh anak lain mendapat margin tertinggi. Demikian juga, di dalam setiap wadah baris, setiap anak yang didahului oleh yang lain mendapat margin kiri.
sumber
Beranjak dari jawaban sawa, berikut ini adalah versi yang sedikit lebih baik yang memungkinkan Anda untuk mengatur jarak tetap antara item tanpa margin di sekitarnya.
http://jsfiddle.net/chris00/s52wmgtq/49/
Juga termasuk versi Safari "-webkit-flex".
sumber
Menurut #ChromDevSummit ada implementasi
gap
properti untuk Flexbox, meskipun saat ini (14 November 2019) itu hanya didukung di Firefox tetapi harus segera diterapkan di Chrome:Demo Langsung
Saya akan memperbarui jawaban saya begitu sampai ke Chrome juga.
sumber
Saya telah menggunakan ini untuk kolom lebar yang dibungkus dan diperbaiki. Kuncinya di sini adalah
calc()
Sampel SCSS
Sampel Codepen lengkap
sumber
Sebuah wadah fleksibel dengan -x (negatif) marjin dan item fleksibel dengan x (positif) marjin atau melapisi kedua menyebabkan hasil visual yang diinginkan: Flex item memiliki kesenjangan tetap 2x hanya antara satu sama lain.
Tampaknya hanya masalah preferensi, apakah menggunakan margin atau padding pada item flex.
Dalam contoh ini, item fleksibel diskalakan secara dinamis untuk menjaga celah tetap:
sumber
Akhirnya mereka akan menambahkan
gap
properti ke flexbox. Sampai saat itu Anda bisa menggunakan kisi-kisi CSS yang sudah memilikigap
properti, dan hanya memiliki satu baris. Lebih bagus daripada berurusan dengan margin.sumber
CSS
gap
Properti :Ada
gap
properti CSS baru untuk multi-kolom, flexbox, dan tata letak kotak yang berfungsi di beberapa browser sekarang! (Lihat Dapatkah saya menggunakan tautan 1 ; tautan 2 ).Saat menulis, ini hanya berfungsi di Firefox sedih. Saat ini berfungsi di Chrome jika Anda mengaktifkan "Aktifkan fitur platform web eksperimental" di
about:flags
.sumber
Menggunakan Flexbox dalam solusi saya, saya telah menggunakan
justify-content
properti untuk elemen induk (wadah) dan saya telah menentukan margin di dalamflex-basis
properti item. Periksa cuplikan kode di bawah ini:sumber
Dengan flexbox, membuat selokan adalah hal yang menyakitkan, terutama ketika pembungkusnya terlibat.
Anda perlu menggunakan margin negatif ( seperti yang ditunjukkan dalam pertanyaan ):
... atau ubah HTML ( seperti yang ditunjukkan pada jawaban lain ):
... atau sesuatu yang lain.
Bagaimanapun, Anda memerlukan peretasan yang jelek untuk membuatnya berfungsi karena flexbox tidak menyediakan fitur "
flex-gap
" ( setidaknya untuk saat ini ).Masalah talang, bagaimanapun, sederhana dan mudah dengan Layout Grid CSS.
Spesifikasi Grid menyediakan properti yang menciptakan ruang di antara item kotak, sambil mengabaikan ruang antara item dan wadah. Properti-properti ini adalah:
grid-column-gap
grid-row-gap
grid-gap
(singkatan untuk kedua properti di atas)Baru-baru ini, spek telah diperbarui agar sesuai dengan Modul Alignment Kotak CSS , yang menyediakan seperangkat properti penyejajaran untuk digunakan di semua model kotak. Jadi propertinya sekarang:
column-gap
row-gap
gap
(steno)Namun, tidak semua browser yang mendukung Grid mendukung properti yang lebih baru, jadi saya akan menggunakan versi asli dalam demo di bawah ini.
Juga, jika jarak diperlukan antara item dan wadah,
padding
pada wadah berfungsi dengan baik (lihat contoh ketiga dalam demo di bawah).Dari spec:
Informasi lebih lanjut:
sumber
Mengapa tidak melakukannya seperti ini:
Ini menggunakan pemilih saudara yang berdekatan , untuk memberikan semua
.item
elemen, kecuali yang pertama amargin-left
. Berkat flexbox, ini bahkan menghasilkan elemen yang sama lebarnya. Ini juga dapat dilakukan dengan elemen-elemen yang diposisikan secara vertikal danmargin-top
, tentu saja.sumber
Inilah solusi saya, yang tidak memerlukan pengaturan kelas apa pun pada elemen anak:
Pemakaian:
Teknik yang sama dapat digunakan untuk baris dan kolom flex normal selain contoh inline yang diberikan di atas, dan diperluas dengan kelas untuk spasi selain 4px.
sumber
Saya sering menggunakan operator + untuk kasus seperti itu
sumber
Saya menemukan cara termudah untuk melakukan ini adalah dengan persentase dan hanya membiarkan margin untuk menghitung lebar Anda
Ini berarti Anda berakhir dengan sesuatu seperti ini jika Anda menggunakan contoh Anda di mana
Apakah artinya nilai Anda didasarkan pada lebar meskipun yang mungkin tidak baik untuk semua orang.
sumber
Berikut adalah kisi-kisi elemen UI kartu dengan spasi diselesaikan menggunakan kotak fleksibel:
Saya merasa frustrasi dengan spasi kartu secara manual dengan memanipulasi padding dan margin dengan hasil yang rapuh. Jadi, inilah kombinasi atribut CSS yang saya temukan sangat efektif:
Semoga ini bisa membantu orang-orang, sekarang dan masa depan.
sumber
Columnify - Kelas solo untuk N kolom
Flexbox dan SCSS
Flexbox dan CSS
Mainkan dengan itu di JSFiddle .
sumber
sumber
Cukup gunakan
.item + .item
dalam pemilih untuk mencocokkan dari yang kedua.item
sumber
Asumsi:
Tetapkan margin kiri pada setiap item kecuali item ke-1, ke-5, ke-9 dan seterusnya; dan atur lebar tetap pada setiap item. Jika margin kiri adalah 10px maka setiap baris akan memiliki margin 30px antara 4 item, persentase lebar item dapat dihitung sebagai berikut:
Ini adalah solusi yang layak untuk masalah yang melibatkan baris terakhir dari flexbox.
sumber
Memang ada cara yang bagus, rapi, hanya CSS untuk melakukan ini (yang dapat dianggap "lebih baik").
Dari semua jawaban yang diposting di sini, saya hanya menemukan satu yang menggunakan calc () berhasil (oleh Dariusz Sikorski). Tetapi ketika diajukan dengan: "tetapi gagal jika hanya ada 2 item di baris terakhir" tidak ada solusi yang diperluas.
Solusi ini menjawab pertanyaan OP dengan alternatif margin negatif dan mengatasi masalah yang diajukan kepada Dariusz.
catatan:
calc()
untuk membiarkan browser melakukan matematika seperti yang diinginkan -100%/3
(meskipun 33,3333% harus bekerja dengan baik) , dan(1em/3)*2
(meskipun .66em juga harus bekerja dengan baik) .::after
untuk mengisi baris terakhir jika ada lebih sedikit elemen dari kolomJuga di https://codepen.io/anon/pen/rqWagE
sumber
Anda bisa menggunakan properti baru
gap
. Saya menyalin dan menempelkan penjelasan yang saya temukan di artikel ini , serta informasi lebih lanjutSayangnya saat ini, hanya FireFox yang mendukung celah dalam tata letak fleksibel.
sumber
gap
sudah direkomendasikan dalam jawaban di sini stackoverflow.com/a/58041749/2756409 Juga, ini bukan CSS.Ini tidak akan berfungsi dalam setiap kasus tetapi jika Anda memiliki lebar anak fleksibel (%) dan mengetahui jumlah item per baris, Anda dapat dengan sangat jelas menentukan margin elemen yang diperlukan dengan menggunakan
nth-child
pemilih / s.Ini sangat tergantung pada apa yang Anda maksud dengan "lebih baik". Dengan cara ini tidak memerlukan markup pembungkus tambahan untuk elemen anak atau elemen negatif - tetapi kedua hal tersebut memiliki tempatnya masing-masing.
sumber
Saya menemukan masalah yang sama sebelumnya, lalu menemukan jawaban untuk ini. Semoga ini akan membantu orang lain untuk referensi di masa mendatang.
jawaban panjang pendek, tambahkan batas pada item fleksibel anak Anda. maka Anda dapat menentukan margin antara item-fleksibel untuk apa pun yang Anda suka. Dalam cuplikan, saya menggunakan hitam untuk tujuan ilustrasi, Anda dapat menggunakan 'transparan' jika mau.
sumber
Trik margin negatif pada kotak kontainer bekerja sangat baik. Berikut adalah contoh lain yang bekerja sangat baik dengan pesanan, pembungkus dan apa yang tidak.
sumber