Saya memiliki tata letak kotak fleksibel sederhana dengan wadah seperti:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Sekarang saya ingin item di baris terakhir disejajarkan dengan yang lain. justify-content: space-between;
harus digunakan karena lebar dan tinggi kisi dapat disesuaikan.
Saat ini sepertinya
Di sini, saya ingin item di kanan bawah berada di "kolom tengah". Apa cara paling sederhana untuk mencapainya? Ini jsfiddle kecil yang menunjukkan perilaku ini.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
css
flexbox
grid-layout
Thorben Croisé
sumber
sumber
Jawaban:
Tambahkan
::after
yang mengisi ruang secara otomatis. Tidak perlu mencemari HTML Anda. Berikut ini adalah codepen yang menunjukkannya: http://codepen.io/DanAndreasson/pen/ZQXLXjsumber
justify-content: space-between;
dari.grid
dan dihapus.grid:after
dan bekerja sama. Sekarang jika Anda mencoba sesuatu seperti ini benar-benar rusak. Perhatikan lebar untuk setiap set 4 jangan tambahkan hingga 100%. Dalam biola OP, lebar diatur dalam px sehingga solusi Anda tidak bekerja dalam situasi ini.space-between
. Namun, ketika saya mengaturflex-basis
dari.grid:after
ke ukuran yang sama seperti barang-barang lainnya di grid (per-breakpoint, override default / basis kode modul di atas), baris penyebaran terakhir dengan benar. Tampaknya berfungsi di Safari, iOS, Firefox, Chrome (perlu menguji IE) dan ukuran baris terbesar saya adalah 3 pada implementasi awal saya.{ content: "";flex: 0 0 32%;max-width: 480px;}
dan saya mengubah max-width dengan perubahan permintaan media sehingga grid sempurna di semua lebar.Satu teknik akan memasukkan sejumlah elemen tambahan (sebanyak jumlah maksimum elemen yang Anda harapkan dalam satu baris) yang diberi tinggi nol. Ruang masih terbagi, tetapi baris-baris tak berguna runtuh:
http://codepen.io/dalgard/pen/Dbnus
Di masa depan, ini dapat dicapai dengan menggunakan banyak
::after(n)
.sumber
Seperti yang telah disebutkan oleh poster lain - tidak ada cara bersih untuk menyelaraskan kiri baris terakhir dengan flexbox (setidaknya sesuai dengan spesifikasi saat ini)
Namun, untuk apa nilainya: Dengan Modul Layout Kotak CSS ini sangat mudah untuk diproduksi:
Pada dasarnya kode yang relevan bermuara pada ini:
1) Jadikan elemen wadah sebagai wadah kotak
2) Atur grid dengan kolom otomatis dengan lebar 100px. (Perhatikan penggunaan pengisian-otomatis (seperti yang ditunjukkan
auto-fit
- yang (untuk tata letak 1-baris) runtuh trek kosong ke 0 - menyebabkan item memperluas untuk mengambil ruang yang tersisa. Ini akan menghasilkan 'ruang-antara 'tata letak ketika kotak hanya memiliki satu baris yang dalam kasus kami bukan yang kita inginkan (lihat demo ini untuk melihat perbedaan di antara mereka)).3) Atur celah / talang untuk baris dan kolom kisi - di sini, karena menginginkan tata letak 'antar-ruang' - jarak sebenarnya akan menjadi jarak minimum karena akan tumbuh seperlunya.
4) Mirip dengan flexbox.
Tampilkan cuplikan kode
Demo Codepen (Ubah ukuran untuk melihat efeknya)
sumber
auto-fit
, ada bug di Chrome 57-60 (dan browser berdasarkan mesinnya, seperti Samsung Internet 6.0) karena speknya agak ambigu pada saat itu. Sekarang spek telah diklarifikasi dan versi baru Chrome ditampilkanauto-fit
dengan benar, tetapi browser dengan mesin lama masih digunakan, jadi harap berhati-hati dengan nilai ini.:after
pseudo-elemen dapat menyebabkan hasil yang tidak diinginkan dalam kasus tepi.Tanpa markup tambahan, hanya menambahkan
::after
berfungsi untuk saya menentukan lebar kolom.Dengan HTML seperti ini:
sumber
flex-basis: 10em
bukan lebar.Kamu tidak bisa Flexbox bukan sistem kisi. Itu tidak memiliki konstruksi bahasa untuk melakukan apa yang Anda minta, setidaknya tidak jika Anda menggunakan
justify-content: space-between
. Yang paling dekat dengan Flexbox adalah dengan menggunakan orientasi kolom, yang mengharuskan pengaturan tinggi eksplisit:http://cssdeck.com/labs/pvsn6t4z (catatan: awalan tidak termasuk)
Namun, akan lebih mudah untuk hanya menggunakan kolom, yang memiliki dukungan lebih baik dan tidak memerlukan pengaturan ketinggian tertentu:
http://cssdeck.com/labs/dwq3x6vr (catatan: awalan tidak termasuk)
sumber
Solusi yang mungkin adalah menggunakan
justify-content: flex-start;
pada.grid
wadah, batasan ukuran pada anak-anaknya, dan margin pada elemen anak yang sesuai - tergantung pada jumlah kolom yang diinginkan.Untuk kisi 3 kolom, CSS dasar akan terlihat seperti ini:
Ini solusi lain yang tidak sempurna, tetapi berhasil.
http://codepen.io/tuxsudo/pen/VYERQJ
sumber
Saya tahu ada banyak jawaban di sini tapi .. Cara paling sederhana untuk melakukan ini adalah dengan
grid
alih - alihflex
dangrid template columns
denganrepeat
danauto fills
, di mana Anda harus mengatur jumlah piksel yang telah Anda berikan untuk setiap elemen,100px
dari kode snippet Anda.sumber
Iya.! Kita dapat tetapi dengan beberapa pertanyaan media & Jumlah kolom maksimum tidak ditentukan sebelumnya .
Di sini saya menggunakan 4 kolom. Periksa kode saya:
CATATAN
1) Tidak perlu membuat div anak. Ini bisa berupa tag lain seperti 'img' r apa pun yang Anda inginkan ..
2) Jika Anda ingin lebih banyak kolom sesuaikan kueri media dan maksimum no.of kolom.
sumber
Jika Anda ingin kisi dengan beberapa ruang antara item dan item dimulai tanpa spasi awal maka solusi sederhana ini berfungsi:
Jika Anda ingin ruang 5px awal maka cukup hapus margin negatif :) Sederhana.
https://jsfiddle.net/b97ewrno/2/
Jawaban yang diterima, sementara bagus, itu menyebabkan tidak ada ruang antara elemen di baris kedua ..
sumber
Jika Anda ingin menyelaraskan item terakhir ke kisi, gunakan kode berikut:
Wadah kotak
Item dalam kisi
Caranya adalah dengan mengatur lebar maksimum item sama dengan lebar maksimum dari .card-grid: after.
Demo langsung di Codepen
sumber
Dimungkinkan untuk menggunakan "mulai-fleksibel" dan untuk menambahkan margin secara manual. Ini membutuhkan beberapa peretasan matematika tetapi jelas mudah dilakukan dan membuatnya mudah digunakan dengan preprocessor CSS seperti KURANG.
Lihat misalnya mixin KURANG ini:
Dan kemudian dapat dengan mudah digunakan untuk menampilkan tata letak grid responsif:
Ini adalah contoh dari
http://codepen.io/anon/pen/YyLqVB?editors=110
sumber
Masalah ini diselesaikan untuk saya menggunakan kotak CSS,
Solusi ini hanya berlaku jika Anda memiliki jumlah kolom tetap yaitu tidak. elemen untuk ditampilkan dalam satu baris
-> menggunakan kisi tetapi tidak menentukan jumlah baris, karena jumlah elemen meningkatkannya membungkus ke dalam kolom dan menambahkan baris secara dinamis, saya telah menentukan tiga kolom dalam contoh ini
-> Anda tidak harus memberikan posisi apa pun kepada anak / sel Anda, karena itu akan memperbaikinya, yang tidak kami inginkan.
sumber
Versi ini adalah cara terbaik untuk blok dengan lebar tetap:
http://codepen.io/7iomka/pen/oxxeNE
Dalam kasus lain - versi dalgard
http://codepen.io/dalgard/pen/Dbnus
sumber
Ada cara tanpa flexbox, meskipun Anda harus memenuhi ketentuan berikut. 1) Wadah memiliki bantalan. 2) Item berukuran sama dan Anda tahu persis berapa banyak yang Anda inginkan per baris.
Padding yang lebih kecil di sisi kanan wadah memungkinkan untuk padding tambahan di sebelah kanan setiap item daftar. Dengan asumsi item lain dalam induk yang sama dengan objek daftar diisi dengan 0 5%, itu akan rata dengan mereka. Anda juga dapat menyesuaikan persentase dengan seberapa banyak margin yang Anda inginkan atau menggunakan menghitung nilai px.
Tentu saja, Anda dapat melakukan hal yang sama tanpa bantalan pada wadah dengan menggunakan nth-child (IE 9+) untuk menghilangkan margin pada setiap kotak ketiga.
sumber
Menggunakan flexbox dan beberapa pertanyaan media, saya membuat ini sedikit bekerja: http://codepen.io/una/pen/yNEGjv (ini sedikit hacky tetapi berfungsi):
sumber
Saya membuat mixin SCSS untuk itu.
Ini adalah tautan codepen: http://codepen.io/diana_aceves/pen/KVGNZg
Anda hanya perlu mengatur lebar item dalam persentase dan jumlah kolom.
Saya harap ini dapat membantu Anda.
sumber
Berikut beberapa mixins scss lainnya.
Mixin ini berasumsi bahwa Anda tidak akan menggunakan plugin js seperti Isotop (mereka tidak menghormati urutan markah html, sehingga mengacaukan aturan css n).
Selain itu, Anda akan dapat mengambil keuntungan penuh dari mereka terutama jika Anda menulis breakpoint responsif Anda dengan mobile terlebih dahulu. Anda idealnya akan menggunakan flexbox_grid () pada breakpoint yang lebih kecil dan flexbox_cell () pada breakpoints berikut. flexbox_cell () akan mengatur ulang margin yang sebelumnya tidak lagi digunakan pada breakpoint yang lebih besar.
Dan omong-omong, selama Anda benar mengatur properti fleksibel penampung Anda, Anda juga dapat menggunakan hanya flexbox_cell () pada item, jika perlu.
Berikut kodenya:
Pemakaian:
Jelas, itu terserah Anda untuk akhirnya mengatur padding / margin / width dari kontener dan margin bawah sel dan sejenisnya.
Semoga ini bisa membantu!
sumber
Ini cukup hacky, tetapi berhasil untuk saya. Saya berusaha mencapai jarak / margin yang konsisten.
http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/
sumber
Sepertinya tidak ada yang mengusulkan solusi flex-grow pada item terakhir. Idenya adalah untuk memiliki item flex terakhir Anda untuk mengambil semua tempat itu dapat menggunakan flex-grow: 1.
Catatan: Solusi ini tidak sempurna, terutama jika Anda telah memusatkan elemen di dalam item flex Anda karena akan berpusat pada item flex terakhir yang mungkin besar.
sumber
Ini adalah kombinasi dari banyak jawaban tetapi tidak persis apa yang saya butuhkan - yaitu, menyelaraskan anak terakhir dalam wadah fleksibel ke kiri sambil mempertahankan ruang-antara perilaku (dalam hal ini adalah tiga kolom tata letak).
Inilah markupnya:
sumber
flex-grow: 0.9
alih-alihflex-basis
karya untuk sejumlah kolom. Diuji dalam banyak browser modern - itu berfungsi di dalamnya semua kecuali paddingnya rusak di IE (tetapi bekerja di Edge0Asumsi:
Tetapkan margin kiri pada setiap item kecuali item 1, 5 dan 9 dan seterusnya. Jika margin kiri adalah 10px maka setiap baris akan memiliki margin 30px didistribusikan di antara 4 item. Lebar persentase untuk item dihitung sebagai berikut:
Ini adalah solusi yang layak untuk masalah yang melibatkan baris terakhir dari flexbox.
sumber
Jika Anda tahu lebar spasi antara elemen dalam baris dan jumlah elemen dalam satu baris, ini akan berhasil:
sumber
Cukup Gunakan Trik Jquery / Javascript untuk menambahkan div kosong:
sumber
Oh boy, saya pikir saya menemukan solusi yang baik dengan CSS minimal dan tanpa JS. Coba lihat:
Kuncinya di sini adalah untuk mengingat bahwa apa yang kita coba capai adalah persis apa
text-align: justify
yang berhasil!Elemen-elemen kosong di HTML ada untuk membuat tampilan baris terakhir sempurna tanpa mengubah tampilan, tetapi mungkin tidak diperlukan mengingat apa yang Anda coba capai. Untuk keseimbangan sempurna dalam setiap situasi, Anda memerlukan setidaknya x-4 elemen kosong, x menjadi jumlah elemen untuk ditampilkan, atau n-2, n menjadi jumlah kolom yang ingin Anda tampilkan.
sumber
Cukup tambahkan beberapa item palsu dengan properti yang sama kecuali ketinggian ditetapkan ke 0px sampai akhir.
sumber
Anda ingin menyelaraskan
gunakan
align-content: flex-start;
sebagai gantijustify-content: space-between;
ini menarik item baris terakhir ke kiri, dan juga mendistribusikan ruang secara merata,
https://codepen.io/anon/pen/aQggBW?editors=1100
solusi danAnderson BUKAN DINAMIS. PERIODE !!
ketika lebar item berubah dari 25 menjadi 28 dan anderson gagal ruang di antara gambar
danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100
dinamis: https://codepen.io/anon/pen/aQggBW?editors=1100
Itulah yang saya coba katakan. dans adalah peretasan .....
sumber
Saya bisa melakukannya dengan
justify-content: space-between
di atas wadahsumber