Tata letak kotak yang fleksibel
Dengan munculnya Kotak Fleksibel CSS , banyak mimpi buruk desainer web 1 telah teratasi. Salah satu yang paling rumit, penyelarasan vertikal. Sekarang dimungkinkan bahkan di ketinggian yang tidak diketahui .
"Dua dekade retas tata letak akan segera berakhir. Mungkin bukan besok, tapi segera, dan selama sisa hidup kita."
- CSS Legendary Eric Meyer di W3Conf 2013
Kotak Fleksibel (atau singkatnya, Flexbox), adalah sistem tata letak baru yang dirancang khusus untuk keperluan tata letak. The Spesifikasi negara :
Tata letak fleksibel dangkal mirip dengan tata letak blok. Ia tidak memiliki banyak properti teks atau dokumen-sentris yang lebih kompleks yang dapat digunakan dalam tata letak blok, seperti float dan kolom. Sebagai gantinya, ia memperoleh alat sederhana dan kuat untuk mendistribusikan ruang dan menyelaraskan konten dengan cara yang sering dibutuhkan webapps dan laman web kompleks.
Bagaimana ini bisa membantu dalam kasus ini? Baiklah, mari kita lihat.
Kolom selaras vertikal
Menggunakan Twitter Bootstrap kita punya .rowbeberapa .col-*. Yang perlu kita lakukan adalah untuk menampilkan .row2 yang diinginkan sebagai kotak wadah fleksibel dan kemudian sejajarkan semua item fleksibelnya (kolom) secara vertikal berdasarkan align-itemsproperti.
CONTOH DI SINI (Silakan baca komentar dengan hati-hati)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Hasil
Area berwarna menampilkan kotak kolom.
Mengklarifikasi align-items: center
8.3 Penyelarasan Sumbu Lintas: align-itemsproperti
Benda fleksibel dapat disejajarkan dalam sumbu silang dari garis saat ini dari wadah fleksibel, serupa dengan justify-contenttetapi pada arah tegak lurus. align-itemsmenyetel perataan standar untuk semua item penampung flex, termasuk item flex anonim .
align-items: center;
Menurut nilai tengah, kotak margin item fleksibel dipusatkan pada sumbu silang di dalam garis.
Peringatan Besar
Catatan penting # 1: Bootstrap Twitter tidak menentukanwidth kolom di perangkat ekstra kecil kecuali Anda memberikan salah satu .col-xs-#kelas ke kolom.
Karena itu dalam demo khusus ini, saya telah menggunakan .col-xs-* kelas agar kolom ditampilkan dengan benar dalam mode seluler, karena ini menentukan widthkolom secara eksplisit.
Tapi Anda juga bisa mematikan tata letak Flexbox hanya dengan mengubah display: flex;kedisplay: block; dalam ukuran layar tertentu. Contohnya:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Atau Anda bisa menentukan .vertical-align hanya pada ukuran layar tertentu seperti:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
Dalam hal ini, aku akan pergi dengan @KevinNelson 's pendekatan .
Catatan penting # 2: Awalan vendor dihilangkan karena singkatnya. Sintaks Flexbox telah diubah selama ini. Sintaks tertulis baru tidak akan berfungsi pada versi browser web yang lebih lama (tetapi tidak setua Internet Explorer 9! Flexbox didukung pada Internet Explorer 10 dan yang lebih baru).
Ini berarti Anda juga harus menggunakan properti yang diawali dengan vendor seperti display: -webkit-box dan seterusnya dalam mode produksi.
Jika Anda mengklik "Toggle Compiled View" di Demo , Anda akan melihat versi awalan deklarasi CSS (terima kasih kepada Autoprefixer ).
Kolom tinggi penuh dengan konten selaras vertikal
Seperti yang Anda lihat di demo sebelumnya , kolom (item fleksibel) tidak lagi setinggi wadahnya (kotak kontainer fleksibel. Yaitu.row elemen).
Ini karena menggunakan centernilai untuk align-itemsproperti. Nilai defaultnya adalah stretchagar item dapat mengisi seluruh ketinggian elemen induk.
Untuk memperbaikinya, Anda dapat menambahkan display: flex;ke kolom juga:
CONTOH DI SINI (Sekali lagi, pikirkan komentarnya)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Hasil
Area berwarna menampilkan kotak kolom.
Terakhir, namun tidak kalah pentingnya , perhatikan bahwa demo dan cuplikan kode di sini dimaksudkan untuk memberi Anda ide yang berbeda, untuk memberikan pendekatan modern untuk mencapai tujuan. Harap perhatikan bagian " Peringatan Besar " jika Anda akan menggunakan pendekatan ini di situs web atau aplikasi dunia nyata.
Untuk bacaan lebih lanjut termasuk dukungan browser, sumber daya ini akan berguna:
1. Sejajarkan gambar secara vertikal di dalam div dengan ketinggian responsif.
2. Lebih baik menggunakan kelas tambahan agar tidak mengubah default Bootstrap Twitter .row.
div, tidak ada teks di dalamnya, sesuatu seperti ini jsfiddle.net/corinem/Aj9H9 tetapi dalam contoh ini saya tidak menggunakan bootstrap