Tentunya tidak kurang ada tutorial tentang CSS Felxbox dan konten online yang mempromosikan dan mengajarkan flexbox kepada pemula. Teknik tata letak sekarang ada di mana mana dapat dipelajari dari sejumlah sumber daya yang berbeda. Tapi saya harap tutorial CSS Flexbox ini untuk pemula yang akan sedikit berbeda.
Dalam tutorial CSS flexbox ini saya bertujuan untuk mengajari anda semua fitur dari modul Tata Letak Flexbox menggunakan demonstrasi yang sepenuhnya interaktif yang benar-benar menjelaskan bagaimana fitur-fitur flexbox memengaruhi elemen pada halaman HTML.
Tentang demo interaktif
Seperti yang disebutkan, semua demo dalam tutorial CSS flexbox ini akan sepenuhnya interaktif. Masing-masing akan mengilustrasikan fitur flexbox tertentu dan anda akan dapat mengklik satu atau lebih tombol di hampir setiap demo untuk melihat efek fitur tersebut.
Selain itu, sebagian besar demo akan menyertakan tombol “toggle direction” yang akan mengalihkan direction properti di elemn container antara ltr dan rtl. Ini akan memungkinkan anda utnuk melihat bagaimana fitur tertentu bekerja di kedua jenis lingkungan, menggunakan bahasa left to right seperti inggris dan spain atau bahasa right to left seperti bahasa arab atau ibrani.
Jika anda belum pernah menggunakan properti ini sebelumnya, berikut adalah demo dengan beberapa contoh teks yang menggunakan bahasa kanan ke kiri :
Ada beberapa cara untuk mencapai definisi bahasa dalam HTML dan CSS, tetapi dalam contoh di atas saya menggunakan direction : rtl CSS untuk elemen paragraf itu. Dalam demo flexbox, saya tidak akan menggunakan bahasa apa pun, hanya elemen dengan konten tiruan, tetapi arahnya akan dapat beralih melalui JavaScript.
Section Artikel
Membuat Container Flexbox
Fitur pertama yang penting untuk diketahui saat bekerja dengan flexbox adalah bagaimana mendefinisikan wadah fleksibel. Sebelum anda memulai menyeleraskan, memusatkan, dan membernarkan elemen di dalam wadah, anda harus terlebih dahulu menentukan bahwa wadah induk adalah wadah fleksibel
.flex-container {
display: flex;
}Setelah anda memiliki ini, semua elemen anak di dalamnya .container menjadi item flex, karena sekarang ada di dalam konteks format fleksibel. Di bawah ini adalah demo CodePen interaktif yang akan memungkinkan anda untuk melihat apa yang terjadi ketika anda mengganti penampung antara display: flex dan display : Block.
Ketika kita klik Toogle Flex Container tersebut makan akan merubah tampilan menjadi seperti ini :
Akan tetapi kita bisa memilih mau dari kiri ke kanan atau kanan ke kiri dengan memilih menu dibawah ini
Diatas saya memilih right to left yang akan merubah tampilan dari arah kanan ke kiri
Berikut adalah source code dari tampilan diatas :
<main> <h2> Toggling a flex container </h2> <p>The Container element (light blue background) has 5 child elemets. Press the button to toggle it between</p> <code>display : block</code> and <code>display : flex</code>. There are no other flex-related properties applied to the elements. </p> <div class="btns"> <button> Toggle Flex Container </button> </div> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <div class="dir"> <label for="ltr"> left-to-right <input type="radio" value="ltr" name="direction" id="ltr" checked></label> <label for="rtl"> right-to-left <input type="radio" value="rtl" name="direction" id="rtl" checked></label> </div> </main>
body {
font-family: Arial, sans-serif;
font-size: 20px;
padding:0 20px 30px 0;
line-height: 1.4;
}
main {
max-width: 800px;
margin: 0 auto;
}
h2 {
text-align: center;
}
code {
font-family: Consolas, monospace;
background: #CCC;
padding: 1px 3px;
}
.btns {
text-align: center;
}
button {
margin: 0 auto 1em;
}
.container {
border: solid 2px;
background: #B2D5FF;
margin-bottom: 1em;
}
.flexcontainer {
display: flex;
}
.ltr {
direction: ltr;
}
.dir {
text-align: center;
}
label {
margin-right : 1.3em;
padding: 8px;
}
.item {
background: #007ED3;
min-height: 100px;
border: solid 2px #305077;
margin 5px;
text-align: center;
font-size: 4em;
color: white;
font-weight: bold;
line-height: 1.4;
}let container = document.querySelector('.container'), dirs = document.querySelector('.dir').querySelectorAll('input');
document.querySelector('button').addEventListener('click', function (){
container.classlist.toggle('flexcontainer');}, false);
for (i of dirs) {
(function(i){
i.addEventListener('click', function(){
clearClasses(container, dirs);
container.classlist.add(i.valuer);},false);
})(i);
}
function clearClasses (el, cl) {
for (i of cl) {
el.classList.remove(i.value);
}
}Dalam contoh ini, satu-satunya CSS terkait flexbox yang diterapkan adalah display:flex. Ruang yang anda lihat di antara item flex adalah margin kecil yang telah saya tambahkan untuk kejelasan. Nanti saya akan membahas berbagai cara untuk melakukan space flex item menggunakan fitur flexbox.
Apa yang anda lihat terjadi saat anda mengaktifkan dan menonaktifkan container fleksibel ? Pertama, penting untuk diperhatikan bahwa semua elemen, termasuk container dan turunannya, adalah <div> elemen. Ini berarti semuanya adalah elemen tingkat blok secara default. Dalam tutorial CSS flexbox ini, saya terutama akan membahas perilaku properti flexbox pada elemen level blok, karena itulah kasus penggunaan yang paling umum.
Secara default, elemen blok ditempatkan di bawah konten sebelumnya, sehingga item ditumpuk secara vertikal. Ketika display:flexdiaktifkan, namun unsur-unsru menyelaraskan horizontal tetap mempertahankan dimensi dan margin yang ditentukan.
Memahami Konteks Container Fleksibel
Seperti yang ditunjukkan demo di awal tadi, container flex secara default akan menampilkan turunan flexnya secara horizontal. Inilah yang disebut sebagai sumbu utama wadah fleksibel. Nanti, saya akan menunjukkan kepada anda cara menampilkan elemen secara vertikal dalam wadah fleksibel. Dalam hal ini, item akan diletakkan pada apa yang disebut sebagai sumbu silang.
Diagram berikut menunjukkan dua sumbu ini :
Seperti yang ditunjukkan, sumbu silang mengalir tegak lurus dengan sumbu utama. Dan penting utnuk dicatat bahwa meskipun blok non-fleksibel di letakkan secara visual dalam arah yang sama dengan sumbu silnag, secara teknis hal itu tidak memenuhi syarat sebagai sumbu silang flexbox hingga penampung di setel ke display: flex.
Properti Flexbox Untuk Container
Dalam tutorial CSS flexbox ini, pertama, saya akan membahas properti berbeda yang dapat anda terapkan ke container fleksibel. Nanti, saya akan menunjukkan cara menargetkan item flex.
Dengan membagi tutorial CSS flexbox dengan cara ini, anda akan dapat dengan mudah mereferensikan fitur yang berbeda tergantung pada apakah anda ingin melakukan sesuatu yang lebih universal untuk semua item sebagai grup melalui container fleksibel atau jika anda ingin menargetkan flex item itu sendiri.
Cara Menentukan Arah Container Fleksibel : Flex-Direction
Seperti yang sudah dibahas, container fleksibel dapat memiliki elemen yang mengalir baik secara vertikal (pada sumbu silang) atau horizontal (sepanjang sumbu utama). Untuk menentukan arah, anda dapat menggunakan flex-direction properti, yang mengambil salah satu dari empat nilai, defaultnya row.
.flex-container { display: flex; flex-direction: row; }Berikut perincian setiap nilai untuk flex-direction”:
- row : Elemen disejajarkan secara horizontal di sepanjang sumbu utama dalam mode penulisan dokumen saat ini.
- row-reverse : Nilai ini juga berada pada sumbu utama tetapi kebalikan dari mode penulisan saat ini.
- column : Sesuai dengan namanya, ini mengalirkan item fleksibel sepanjang sumbu silang (vertikal), dengan mempertimbangkan mode penulisan saat ini
- column-reverse : Sama seperti column tapi terbalik
Anda dapat melihat semua nilai dari demo berikut ini : (saya menggunakan codepen agar lebih mudah).
Yang pertama adalah contoh row dari kiri ke kanan. Disitu ada pilihannya tinggal memilih saja mau toggle yang mana tinggal pilih.
Dibawah ini adalah contoh dari row-reverse
Selanjutnya adalah contoh column
Dan yang terakhir ada column-reserve
Jika ingin memlih dari kanan ke kiri anda tinggal klik dibawah nya yaitu “right-to-left”
Berikut adalah source code nya :
Source Code HTML :
<h2>Determining the Direction of the Flex Container: <code> flex-direction</code></h2>
<div class="btns">
<label for="row">row <input type="radio" name="flexdirection" value="row" id="row" checked></label>
<label for="row-reserve">row-reserve <input type="radio" name="flexdirection" value="row-reserve" id="row-reserve" checked></label>
<label for="column">column <input type="radio" name="flexdirection" value="column" id="column" checked></label>
<label for="column-reserve">column-reserve <input type="radio" name="flexdirection" value="column-reserve" id="column-reserve" checked></label>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<div class="dir">
<label for="ltr">left-to-right <input type="radio" value="ltr" name="direction" id="ltr" checked></label>
<label for="rtl">right-to-left <input type="radio" value="rtl" name="direction" id="rtl"></label>
</div>
</main>Berikut untuk CSS nya :
body {
font-family: Arial, sans-serif;
font-size: 1.3em;
padding: 0 2em 3em;
line-height: 1.4;
}
main {
max-width: 800px;
margin: 0 auto;
}
h2 {
text-align: center;
margin-top: 14px;
}
code {
font-family: Consolas, monospace;
background: #ccc;
padding: 1px 3px;
}
.btns {
padding-bottom: 1em;
text-align: center;
}
.dir {
text-align: center;
}
label {
margin-right: 1.3em;
padding: 8px;
}
.container {
border:solid 2px;
margin-bottom: 1em;
background: #B2D5FF;
display: flex;
}
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
.row {
flex-direction: row;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
.item {
width: 15%;
background: #007ED3;
mid-height: 200px;
border: solid 2px #305077;
margin: 5px;
text-align: center;
font-size: 4em;
color: white;
font-weight: bold;
line-height: 1.4;
}let btns = document.querySelector ('.btns').querySelectorAll('input'), dirs = document.querySelector ('.dir').querySelectorAll('input'). container = document.querySelector('.container')
for (i of btns) {
(function(i) {
i.addEventListener('click', function() {
clearClasses(container, btns);
container.classList.add(i.value);
}, false);
})(i);
}
for (i of dirs) {
(function(i) {
i.addEventListener('click', function() {
clearClasses(container, dirs);
container.classList.add(i.value);
}, false);
})(i);
}
function clearClasses (el, cl) {
for (i of cl) {
el.classList.remove(i.value);
}
}Perhatikan bahwa kotak diberi nomor sehingga anda dapat dengan mudah melihat efek *-reversenilai.
Perhatikan juga bahwa dalam bahasa Inggris dan banyak bahasa lainnya, mode penulisan disetel dari kiri ke kanan, sedangkan bahasa lain disetel terbalik. Inilah sebabnya mengapa anda akan sering melihat terminologi yang lebih umum digunakan dalam spesifikasi CSS yang lebih baru, dan mengapa spesifikasi seperti properti dan nilai logis dibuat. Properti logis tidak membuat asumsi tentang bahasas halaman (tidak seperti sesuatu seperti tex-align: left, yang membuat asumsi), sehingga istilah seperti ‘kiri’ dan ‘kanan’ tidak digunakan tetapi diganti dengan ‘mulai’ dan ‘akhir’.
Nah mungkin itu dulu untuk CSS flexbox, nantika kelanjutan dari CSS flexbox berikutnya.
