Yaitu, di sini saya akan menunjukkan kepada Anda bagaimana menggunakan tata letak Flexbox untuk membuat header berkualitas tinggi untuk situs web. Saya akan membagikan beberapa tips, dan pada akhirnya, saya akan mendemonstrasikan proyek saya, yang dibuat khusus untuk materi ini. Karena itu, jika Anda benar-benar tertarik dengan topik yang saya putuskan untuk diangkat di sini, Anda harus membaca artikel ini sampai akhir.
Di sini saya mengasumsikan Anda mengetahui dasar-dasar tata letak Flexbox. Di sini , untuk berjaga-jaga, artikel saya ditulis untuk mereka yang ingin mempelajari lebih lanjut tentang properti CSS
flex.
pengantar
Pertama, pastikan Anda dan saya menyebut "header situs" atau "header situs" sebagai hal yang sama. Header situs adalah salah satu elemen halaman pertama yang dilihat pengguna saat mengunjungi situs. Biasanya berisi logo atau nama situs, serta tautan navigasi. Perhatikan gambar berikut.
Logo situs, link navigasi, dan penampung bagian header
Terlepas dari desain bagian header situs, elemen utamanya adalah logo dan daftar link.
Teknologi Flexbox sedang beraksi
Saat tata letak untuk tajuk situs dibuat menggunakan teknologi Flexbox, semua item di tingkat yang sama dibariskan dalam satu baris. Kemudian yang tersisa hanyalah menggunakan properti
justify-contentuntuk menyelaraskan elemen dengan mendistribusikan ruang kosong di antara mereka.
Berikut kode markupnya:
<header class="site-header">
<a href="#" class="brand">Brand</a>
<nav class="nav"></nav>
</header>
Berikut gayanya:
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
Sama sekali tidak rumit, bukan? Nah, untuk tajuk utama yang begitu sederhana. Namun dalam praktiknya, banyak hal bisa menjadi jauh lebih rumit.
Penampung header halaman
Markup header halaman yang dijelaskan di bagian sebelumnya tidak berisi elemen penampung dalam yang berisi elemen yang mewakili logo dan link navigasi. Pada layar besar, menggunakan tata letak ini bisa menimbulkan masalah.
Tata letak header halaman dibuat tanpa menggunakan wadah dalam (di atas) dan menggunakan wadah (di bawah)
Perhatikan bahwa header halaman pertama terlalu lebar karena wadah dalam tidak digunakan saat dibuat. Tapi tata letak kedua terlihat jauh lebih baik. Oleh karena itu, kode HTML dari contoh sebelumnya harus ditulis ulang sebagai berikut:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
</div>
</header>
Dan gaya fleksibel perlu diterapkan ke elemen
.site-header__wrapper:
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
Menggunakan properti flex-wrap
Properti
flex-wrapadalah sejenis mekanisme keamanan CSS. Jika ukuran layar kecil, ada kemungkinan Anda harus menggunakan pengguliran horizontal untuk bekerja dengan bagian header halaman. Seperti inilah kelihatannya.
Untuk bekerja dengan judul halaman, Anda perlu menggunakan pengguliran horizontal. Masalahnya adalah properti flex-wrap tidak digunakan di sini: wrap
Seperti yang Anda lihat, akan merepotkan untuk bekerja dengan halaman seperti itu. Jadi jangan lupa tentang propertinya
flex-wrap!
Menjelajahi opsi tata letak yang berbeda untuk bagian header halaman
Apa yang saya suka tentang tata letak Flexbox adalah bahwa mereka membuatnya lebih mudah untuk mendukung opsi desain yang berbeda untuk bagian header halaman. Di bagian ini, berdasarkan contoh di atas, saya akan menjelajahi kemungkinan memperluas tata letak dengan menambahkan elemen baru ke dalamnya, seperti tombol dan bidang pencarian. Langsung saja, saya ingin mencari cara untuk mengubah urutan tampilan anak-anak dari header halaman.
▍Varian nomor 1
Versi pertama dari bagian tajuk halaman
Tombol A telah ditambahkan ke tata letak ini, ditempatkan setelah blok tautan navigasi. Bagaimana cara melakukannya? Apakah saya perlu memformatnya sebagai tautan yang ditempatkan di dalam elemen
<nav>? Atau mungkin harus dibuat elemen tersendiri? Saya akan melakukan itu.
Inilah HTML untuk ide saya:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Dalam hal ini, jarak antar elemen tidak dapat diatur menggunakan properti
justify-content: space-between. Sebagai gantinya, saya akan menggunakan properti untuk menyelaraskan blok tautan margin-left: auto. Ini akan mendorong tautan dan tombol ke sisi kanan wadah.
Elemen, berkat margin-left: auto, ditekan ke sisi kanan penampung.
Memisahkan tombol dari blok tautan sangat berguna untuk tata letak seluler, di mana, misalnya, Anda mungkin perlu keluar dari tombol dan menampilkan blok tautan sebagai menu tarik-turun.
Header halaman di desktop dan seluler
▍ Opsi nomor 2
Varian kedua dari bagian heading halaman
Di sini kami telah memperluas kemampuan bagian heading halaman dengan menambahkan bidang pencarian ke dalamnya. Ini menggunakan ruang kosong yang tersisa setelah menempatkan elemen lain di halaman. Dengan tata letak Flexbox, ini dapat dicapai dengan menerapkan properti
flex.
Inilah markupnya:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<div class="search"></div>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Berikut adalah gaya yang diterapkan ke kotak telusur:
.search {
flex: 1;
}
Itu saja! Sekarang bidang akan mengisi ruang kosong antara logo dan blok tautan. Namun, pendekatan ini memiliki beberapa keterbatasan. Pada layar kecil, header halaman akan terlihat seperti di bawah ini.
Header halaman di layar kecil
Lebar bidang pencarian tidak boleh kurang dari ukuran tertentu. Jika tidak, akan sulit untuk memasukkan teks ke dalamnya. Di bawah ini adalah beberapa solusi untuk masalah ini.
Memecahkan masalah yang disebabkan oleh pengurangan lebar bidang pencarian di layar kecil
Saya lebih suka opsi kedua, karena saat menggunakannya, blok tautan tidak disembunyikan terlalu dini. Secara umum, saya dapat mengatakan bahwa saya berusaha untuk tidak menyembunyikan elemen jika tidak mengganggu tampilan tata letak yang benar.
▍ Opsi nomor 3
Versi ketiga dari bagian heading
Ini adalah markup yang sama dengan versi pertama dari heading. Namun di sini urutan tampilan elemen di layar telah diubah. Bagaimana cara melakukannya? Anda dapat memutuskan untuk menggunakan properti di sini
order. Mari jelajahi ide ini.
Ini HTML-nya:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Berikut gayanya:
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
Dan seperti inilah hasil dari rendering semua ini.
Menggunakan properti justify-content: space-between tidak meratakan logo ke tengah. Properti ini hanya mendistribusikan ruang kosong di antara elemen.
Solusi untuk masalah ini adalah menetapkan setiap elemen turunan ke header halaman dengan properti
flex: 1. Ini akan mendistribusikan ruang antar elemen.
Berikut gayanya:
.brand,
.nav,
.button {
flex: 1;
}
Distribusi ruang kosong yang seragam antara elemen-elemen bagian heading halaman
Namun, sesuatu yang aneh terjadi dengan tombol tersebut. Itu, karena penerapan properti
flex: 1, menjadi terlalu lama. Satu-satunya cara untuk memperbaikinya adalah dengan meletakkan tombol di elemen kontainer:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<div class="button-wrapper">
<a href="/track-shipment" class="button">Track</a>
</div>
</div>
</header>
Dengan pendekatan ini, Anda bisa meratakan tengah logo dan tombol:
.logo {
text-align: center;
}
/* . - , , . */
.button-wrapper {
text-align: end; /* end - , LTR-, , right */
}
Menyelaraskan Elemen
Pendekatan ini, bagaimanapun, juga tidak ideal. Ingatlah bahwa jika ada lebih banyak tautan di blok navigasi, itu akan menimbulkan masalah. Yaitu, di sini perlu agar lebar blok navigasi tidak melebihi ukuran tertentu. Berikut adalah contoh di mana logo kehilangan kesejajaran tengahnya.
Logo tidak lagi berada di tengah.
Seperti yang Anda lihat, pada gambar sebelumnya, logo tidak lagi berada di tengah. Perlu diingat tentang fitur dari pendekatan di atas agar tidak menghadapi masalah yang tidak terduga.
Sekarang kita telah menjelajahi berbagai opsi untuk merancang tata letak tajuk untuk situs web dan berbicara tentang cara membuat tata letak seperti itu, mari kita lihat beberapa ide penting yang dapat membantu kita saat membuat bagian tajuk untuk halaman.
Tip untuk Merancang Header untuk Halaman Berbasis Flexbox
▍ Properti flex-basis
Saya lebih suka menggunakan properti
flex-basis: 100%saat elemen harus memiliki lebar penuh di perangkat seluler. Misalnya, jika kita berbicara tentang blok penting tautan navigasi yang tidak dapat disembunyikan.
Hasil penerapan properti flex-basis adalah 100%
Menerapkan properti ini, jika Anda melihat gambar sebelumnya, mungkin tampak seperti masalah sederhana. Pada kenyataannya, tidak demikian. Biasanya, tajuk situs dapat memiliki bantalan, dan jika kita menyesuaikan elemen untuk mengisi lebar penuh, ini tidak akan terjadi sampai bantalan tumpang tindih. Namun, menghapusnya tidak praktis, karena akan memengaruhi elemen tata letak lainnya.
Berikut cara memperbaiki masalah ini:
- Mari tambahkan
flex: 1 0 100%ke blok navigasi. - Mari kita ubah, jika perlu, propertinya
order. Terkadang kita harus menjaga elemen lain juga, jadi kita perlu memastikan bahwa kotak navigasi adalah elemen terakhir. - Mari sesuaikan margin kotak navigasi menggunakan nilai negatif yang sama dengan ukuran margin internal. Ini akan memungkinkan blok ini untuk mengisi lebar penuh halaman.
- Mari kita sesuaikan bantalannya sehingga ada sedikit "udara" di elemen.
- Terakhir, kita akan menggunakan properti
justify-content: centeruntuk memusatkan elemen navigasi (meskipun ini tidak terlalu penting).
Berikut adalah gaya (dalam tanda kurung siku adalah item dalam daftar di atas yang terkait):
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
Dan berikut adalah bagaimana penerapan langkah demi langkah dari gaya di atas ke daftar elemen navigasi akan terlihat.
Menggayai elemen selangkah demi selangkah
▍Menyesuaikan jarak antar elemen
Sekarang browser Chrome dan Firefox mendukung properti tersebut
gap, sangat mudah untuk menyesuaikan jarak antara item fleksibel. Lihatlah bagian header halaman berikutnya.
Menggunakan properti gap
Untuk menyesuaikan jarak antara item yang dipilih pada gambar, Anda perlu menambahkan properti ke item parent flex
gap: 1rem. Tanpa menggunakan properti ini, kita harus memberi style pada elemen dengan cara yang sama.
/* */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* */
.site-header {
/* flexbox-*/
gap: 1rem;
}
Jika Anda menggunakan properti
gap, ingatlah bahwa Anda perlu mempersiapkan dan melakukan fallback jika tidak didukung oleh browser tempat halaman dilihat. Saya menulis artikel rinci tentang ini .
Ini mengakhiri percakapan, tetapi sebelum kita berpisah, izinkan saya menunjukkan kepada Anda salah satu proyek saya.
Proyek header-css
Berikut adalah contoh header untuk halaman yang dibuat dalam proyek headers-css.
Header halaman dari header-css
Saya memutuskan untuk membuat proyek di mana template untuk bagian header situs dikumpulkan, dirancang sebagai halaman terpisah. Sekarang, jika saya membutuhkan elemen serupa, saya dapat dengan cepat menemukannya dan mengintegrasikannya ke dalam proyek baru. Yaitu, saya membuat 17 variasi header halaman. Saya berencana untuk mengembangkan proyek ini dalam waktu dekat. Saat mengerjakan elemen-elemen ini, saya memberi perhatian khusus pada yang berikut:
- Fleksibilitas.
- Desain sepenuhnya responsif.
- Menggunakan Sass, yang memudahkan untuk mengedit template saya (walaupun di area ini saya masih perlu sedikit merefaktor kode).
- Aksesibilitas (jika Anda menemukan sesuatu yang salah - tambahkan entri ke pelacak tugas proyek).
Berikut adalah halaman untuk melihat proyek headers-css beraksi. Dan inilah repositori GitHub proyek.
Bagaimana Anda membuat bagian header dari halaman web Anda?
