Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Baca Juga : Pengertian Dasar Mengenai Website
Apa itu CSS ?
A. Pengertian dan Penjelasan CSS
CSS (Cascading Style Sheet) adalah kode yang memberi tahu browser cara memberi gaya (style) konten dokumen HTML dengan menggunakan aturan untuk menjelaskan bagaimana elemen HTML yang berbeda harus ditampilkan.
Kegunaan :
Struktur CSS
CSS terdiri dari 2 struktur, yaitu selector dan declaration. Selector adalah sebuah tag html yang digunakan pada CSS agar elemen tersebut dapat dimanipulasi atau ditambahkan style pada CSS, selector dapat berupa tag html itu sendiri, atau bisa juga berupa nilai dari atribut class atau id pada tag html. Declaration terdiri dari 2 bagian, yaitu property dan value.
B. Flexbox
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Baca Juga : Pengertian Dasar Mengenai Website
Apa itu CSS ?
A. Pengertian dan Penjelasan CSS
CSS (Cascading Style Sheet) adalah kode yang memberi tahu browser cara memberi gaya (style) konten dokumen HTML dengan menggunakan aturan untuk menjelaskan bagaimana elemen HTML yang berbeda harus ditampilkan.
Kegunaan :
- Dapat mengubah tampilan halaman web Anda tanpa mengubah konten apa pun yang mendasarinya.
- Dapat menghemat banyak pekerjaan, di antaranya dapat mengontrol tata letak beberapa halaman web sekaligus.
Struktur CSS
CSS terdiri dari 2 struktur, yaitu selector dan declaration. Selector adalah sebuah tag html yang digunakan pada CSS agar elemen tersebut dapat dimanipulasi atau ditambahkan style pada CSS, selector dapat berupa tag html itu sendiri, atau bisa juga berupa nilai dari atribut class atau id pada tag html. Declaration terdiri dari 2 bagian, yaitu property dan value.
B. Flexbox
CSS flexbox (Flexible Box Layout Module) adalah modul tata letak yang terdiri dari dua elemen yaitu flex container (elemen induk) dan flex items (elemen anak). Flex items dapat diatur sebagai baris atau kolom, dan ruang kosong yang tersedia dapat didistribusikan dan diisi oleh flex items yang ada dengan berbagai cara.
Tujuan dari flexbox yaitu memberikan container kemampuan untuk mengatur panjang, lebar, dan posisi item-item yang berada di dalamnya agar memaksimalkan ruang yang ada. Pengaturan ini sangat penting bagi seorang frontend developer untuk membuat sebuah website yang nyaman dilihat di berbagai device dengan berbagai macam resolusi.
Untuk mencoba dan mengaplikasikan tutorial mengenai flexbox ini, diharapkan tidak menggunakan browser versi lama yang tidak mendukung flex. Properti flexbox didukung di semua browser modern (Mozilla Firefox, Google Chrome, Safari, Microsoft Edge).
Parent Element (Container)
Untuk mencoba dan mengaplikasikan tutorial mengenai flexbox ini, diharapkan tidak menggunakan browser versi lama yang tidak mendukung flex. Properti flexbox didukung di semua browser modern (Mozilla Firefox, Google Chrome, Safari, Microsoft Edge).
Parent Element (Container)
1. Flex Container : Display
Menentukkan container untuk flex apakah inline atau block. Inilah yang mendasari sebuah elemen akan memiliki sifat flex atau tidak.
Contoh Syntax dasar Display
.flex-container {
display: flex; /* atau inline-flex */
}
2. Flex container : Display Block
Menentukkan container untuk flex apakah inline atau block. Inilah yang mendasari sebuah elemen akan memiliki sifat flex atau tidak.
Contoh Syntax dasar Display
.flex-container {
display: flex; /* atau inline-flex */
}
2. Flex container : Display Block
Contoh Penggunaan Display Block
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: Maroon;
} .flex-container > div {
background-color: #f1f1f1;
margin: 10px; padding: 20px; font-size: 30px;}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: Maroon;
} .flex-container > div {
background-color: #f1f1f1;
margin: 10px; padding: 20px; font-size: 30px;}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
3. Flex container : Display Inline
Contoh penggunaan Display Inline:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: inline-flex;
background-color: Maroon;
} .flex-container > div {
background-color: #f1f1f1;
margin: 10px; padding: 20px; font-size: 30px;}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: inline-flex;
background-color: Maroon;
} .flex-container > div {
background-color: #f1f1f1;
margin: 10px; padding: 20px; font-size: 30px;}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4. Flex container : flex-direction
Menentukkan arah (direction) yang akan diberlakukan untuk item-item yang ada pada container flexbox. Arah yang dimaksud adalah apakah ingin mengarah berbaris/horizontal (dari kiri ke kanan atau sebaliknya) atau seperti kolom/vertikal (dari atas kebawah atau sebaliknya).
Menentukkan arah (direction) yang akan diberlakukan untuk item-item yang ada pada container flexbox. Arah yang dimaksud adalah apakah ingin mengarah berbaris/horizontal (dari kiri ke kanan atau sebaliknya) atau seperti kolom/vertikal (dari atas kebawah atau sebaliknya).
Contoh Syntax dasar flex-direction :
.flex-container{
flex-direction: column;
}
/*Pilihan value-nya adalah: row | row-reverse | column | column-reverse;*/
5. Flex container : flex-direction column
Nilai kolom menumpuk flex item secara vertikal beserta flex item yang berurutan dari atas ke bawah. Contoh penggunaan flex-direction column
Contoh penggunaan flex-direction column
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: column;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
.flex-container{
flex-direction: column;
}
/*Pilihan value-nya adalah: row | row-reverse | column | column-reverse;*/
- row: Dari kiri ke Kanan.
- row-reverse: Dari Kanan ke Kiri (Kebalikan dari row).
- column: Dari Atas ke Bawah.
- column-reverse: Dari Bawah ke Atas (kebalikan dari column)
Baca Juga : Pengertian Dasar Mengenai HTML
Nilai kolom menumpuk flex item secara vertikal beserta flex item yang berurutan dari atas ke bawah. Contoh penggunaan flex-direction column
Contoh penggunaan flex-direction column
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: column;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
6. Flex container : flex-direction column-reverse
Nilai kolom terbalik menumpuk item fleksibel secara vertikal namun flex item terbalik dari bawah ke atas.
Contoh penggunaan flex-direction column-reverse :
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
Nilai kolom terbalik menumpuk item fleksibel secara vertikal namun flex item terbalik dari bawah ke atas.
Contoh penggunaan flex-direction column-reverse :
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
7. Flex container : flex-direction row
Nilai baris menumpuk flex item secara horizontal dan flex items berurut dari kiri ke kanan.
Contoh penggunaan flex-direction row :
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: row;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
Nilai baris menumpuk flex item secara horizontal dan flex items berurut dari kiri ke kanan.
Contoh penggunaan flex-direction row :
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: row;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
8. Flex container : flex-direction row-reverse
Nilai row-reverse menumpuk item flex secara horizontal (tapi dari kanan ke kiri).
Contoh penggunaan flex-direction row-reverse :
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
Nilai row-reverse menumpuk item flex secara horizontal (tapi dari kanan ke kiri).
Contoh penggunaan flex-direction row-reverse :
<!DOCTYPE html>
<html>
<head><style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: maroon;
} .flex-container > div {
background-color: #f1f1f1;
width: 100px; margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div> </body></html>
9. Flex container : flex-wrap
flex-wrap digunakan untuk mendefinisikan bahwa elemen item di dalam container flexbox tidak harus disejajarkan dalam satu baris. Artinya, elemen item tersebut digulung (dipindahkan) ke baris baru bila sudah memenuhi lebar container-nya.
flex-wrap digunakan untuk mendefinisikan bahwa elemen item di dalam container flexbox tidak harus disejajarkan dalam satu baris. Artinya, elemen item tersebut digulung (dipindahkan) ke baris baru bila sudah memenuhi lebar container-nya.
- nowrap: Jangan digulung (dipindahkan) ke baris baru.
- wrap: Digulung (dipindahkan) ke baris
- wrap-reverse: digulung (dipindahkan) ke baris baru tapi dibalik (elemen item terakhir, jadi pertama).
Syntax dasar flex-wrap :
.flex-container{
flex-wrap: wrap;
}
/*Pilihan value-nya adalah: nowrap | wrap | wrapreverse*/
Baca Juga : Pengertian Dasar Mengenai CSS
10. Flex container : flex-wrap wrap
Nilai wrap menentukan bahwa flex item akan diwrap (digulung atau dipindahlan) jika diperlukan.
Contoh penggunaan flex-wrap wrap
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
Nilai wrap menentukan bahwa flex item akan diwrap (digulung atau dipindahlan) jika diperlukan.
Contoh penggunaan flex-wrap wrap
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
11. Flex container : flex-wrap wrap-reverse
Nilai wrap-reverse menentukan bahwa item fleks akan diwrap (digulung atau dipindahlan ) jika perlu, dalam urutan terbalik.
Contoh penggunaan flex-wrap wrap-reverse :
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
12. Flex container : flex-wrap nowrap
Nilai nowrap menentukan bahwa flex item tidak akan diwrap (digulung atau dipindahlan).
Contoh penggunaan flex-wrap nowrap :
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
13. Flex container : flex-flow
flex-flow adalah kependekan (tulisan cepat) atau gabungan dari flexdirection dan flex-wrap. Sebaiknya menggunakan kependekan ini dalam produksi design web.
Syntax dasar flex-flow :
.flex-container{
flex-flow: row-reverse wrap;
}
/*penggunaanya adalah: gabungan dari <flex-direction><spasi> <flex-wrap>*/
14. Flex container : flex-flow
Gabungan antara row-reverse dan wrap (untuk penggabungan lainnya bisa diuji coba secara mandiri).
Contoh penggunaan flex-flow :
<!DOCTYPE html>
<html><head>style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
Baca Juga : Pengertian Dasar Mengenai Bootstrap
Gabungan antara row-reverse dan wrap (untuk penggabungan lainnya bisa diuji coba secara mandiri).
Contoh penggunaan flex-flow :
<!DOCTYPE html>
<html><head>style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
15. Flex container : justify-content
justify-content digunakan untuk mensejajarkan item-item diantara flexbox agar container dari flexbox tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.
- flex-start: Item flex disejajarkan dari baris pertama (kiri).
- flex-end: Item flex disejajarkan pada baris terakhir (kanan).
- center: disejajarkan ditengah-tengah baris.
- space-between: disejajarkan dengan memberi spasi diantara item, yang mana item pertama berada pada baris pertama dan item terakhir pada baris terakhir.
- space-around: disejajarkan dengan memberi spasi yang sama diantara item. spasi diantara item tersebut mungkin nampak tidak sama karena semua item memiliki spasi yang sama pada kedua sisi.
Syntax dasar justify-content :
.flex-container{
justify-content: space-around;
}
/*Pilihan value-nya adalah: flex-start | flex-end | center | space-between | space-around;*/
16. Flex container : justify-content flex-start
Nilai flex-start menyelaraskan item flex di awal container (ini default).
Contoh penggunaan justify-content flex-start :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
justify-content: flex-start;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
17. Flex container : justify-content flex-end
Nilai flex-end menyelaraskan item flex di akhir container.
Contoh penggunaan justify-content flex-end :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
justify-content: flex-end;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
18. Flex container : justify-content center
Nilai center meratakan fleks item di tengah container.
Contoh penggunaan justify-content center :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
justify-content: center;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
19. Flex container : justify-content space-between
Nilai space-between menampilkan item flex fleksibe dengan spasi antara items pada baris tersebut.
Contoh penggunaan justify-content spacebetween :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
20. Flex container : justify-content space-around
Nilai space-around menampilkan item flex fleksibel dengan spasi sebelum, di antara, dan setelah items.
Contoh penggunaan justify-content : space-around
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
21. Flex container : align-items
align-items mendefinisikan bagaimana item-item pada container flex tersebut diletakkan sepanjang garis tegak lurus pada sumbu utama (crossaxis). Ini sama halnya dengan justify-content tapi peletakkannya saja yang berbeda.
Syntax dasar align-items :
.flex-container{
align-items: flex-end;
}
/*Pilihan value-nya adalah: flex-start | flex-end |center | baseline | stretch;*/
22. Flex container : align-items flex-start
Nilai flex-start menyelaraskan item flex di bagian atas container.
Contoh penggunaan align-items flex-start :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
23. Flex container : align-items flex-end
Nilai flex-end menyelaraskan item flex di bagian bawah container.
Contoh penggunaan align-items flex-end :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
24. Flex container : align-items center
Nilai center menyelaraskan item flex di tengah container.
Contoh penggunaan align-items center :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
25. Flex container : align-items baseline
Nilai baseline menyelaraskan item fleksibel seperti garis dasar yang ada. Contohnya ialah menggunakan ukuran font yang berbeda untuk menunjukkan bahwa item disejajarkan dengan garis dasar teks.
Contoh penggunaan align-items baseline :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
background-color:maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</small></div>
</div></body></html>
26. Flex container : align-items stretch
Nilai stretch meregangkan item flex untuk mengisi container (default).
Contoh penggunaan align-items stretch :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
27. Flex container : align-content
align-content digunakan untuk mensejajarkan garis flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu utama (cross-axis). Sama halnya dengan justify-content yang mana mensejajarkan individu items pada main axis. Harap diperhatikan: Properti ini tidak dapat diaplikasikan jika hanya terdapat satu flex item.
Syntax dasar align-content :
.flex-container{
align-content: flex-end;
}
/*Pilihan value-nya adalah: flex-start | flex-end |center | space-between | space-around | stretch;*/
28. Flex container : align-content flex-start
Nilai flex-start menampilkan baris-baris flex fleksibel di awal container.
Contoh penggunaan align-content flex-start :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
29. Flex container : align-content flex-end
Nilai flex-end menampilkan baris-baris flex fleksibel di akhir container.
Contoh penggunaan align-content flex-end :
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
30. Flex container : align-content center
Nilai center menampilkan baris-baris flex fleksibel di tengah container.
Contoh penggunaan align-content center :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div></body></html>
31. Flex container : align-content space-between
Nilai space-between menampilkan baris-baris flex item fleksibel dengan jarak yang sama di antara mereka.
Contoh penggunaan align-content space-between :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
32. Flex container : align-content space-around
Nilai space-around menampilkan baris-baris flex item fleksibel dengan spasi sebelum, di antara, dan sesudahnya.
Contoh penggunaan aligncontent space-around :
<!DOCTYPE html>
<html><head><style>.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
background-color: maroon;;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div> <div>4</div>
<div>5</div><div>6</div>
</div></body></html>
33. Flex container : align-content stretch
Nilai stretch meregangkan baris-baris flex item fleksibel untuk mengambil ruang yang tersisa (default).
Contoh penggunaan aligncontent stretch :
<!DOCTYPE html>
<html><head><style>.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
background-color: maroon;
}.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
</div></body></html>
Baca Juga : Pengertian Dasar Mengenai DOM
Child Element (Items)
1. flex item : order
Properti order menentukan urutan item flex. Item flex pertama dalam kode tidak harus muncul sebagai item pertama di layout.
Contoh penggunaan order :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container>div {
background-color: maroon;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div></body></html>
1. flex item : order
Properti order menentukan urutan item flex. Item flex pertama dalam kode tidak harus muncul sebagai item pertama di layout.
Contoh penggunaan order :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container>div {
background-color: maroon;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div></body></html>
2. flex item : flex-grow
Properti flex-grow menentukan seberapa banyak item flex akan tumbuh relatif terhadap sisa item flex. Nilainya harus berupa angka.
Contoh penggunaan flex-grow :
<!DOCTYPE html>
<html><head><style>.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container > div {
background-color:maroon;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div></body></html>
3. flex item : flex-shrink
Properti flex-shrink menentukan seberapa banyak item flex akan menyusut relatif terhadap item flex lainnya. Contohnya adalah suatu item flex tidak menyusut sebanyak item flex lainnya. Nilainya harus berupa angka.
Contoh penggunaan flex-shrink :
<html><head><style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container>div {
background-color: maroon;
color: white; width: 100px;
margin: 10px; text-align: center;
line-height: 75px; font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div><div>5</div>
<div>6</div><div>7</div>
<div>8</div><div>9</div>
<div>10</div>
</div></body></html>
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div></body></html>
3. flex item : flex-shrink
Properti flex-shrink menentukan seberapa banyak item flex akan menyusut relatif terhadap item flex lainnya. Contohnya adalah suatu item flex tidak menyusut sebanyak item flex lainnya. Nilainya harus berupa angka.
Contoh penggunaan flex-shrink :
<html><head><style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container>div {
background-color: maroon;
color: white; width: 100px;
margin: 10px; text-align: center;
line-height: 75px; font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div><div>5</div>
<div>6</div><div>7</div>
<div>8</div><div>9</div>
<div>10</div>
</div></body></html>
4. flex item : flex-basis
Properti flex-basis menentukan panjang awal item flex. Contohnya adalah Setel panjang awal item flex ketiga menjadi 200 piksel.
Contoh penggunaan flex-basis :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container > div {
background-color: maroon;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div> <div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div></div></body></html>
5. flex item : flex
Properti flex adalah properti singkatan untuk properti flex-grow, flexshrink, dan flex-basis Contohnya adalah membuat item flex ketiga tidak bisa dikembangkan (0), tidak menyusut (0), dan dengan panjang awal 200 piksel.
Contoh penggunaan flex :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}.flex-container>div {
background-color: maroon;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;}
</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div></div></body></html>
6. flex item : align-self
Align-self property menentukan perataan untuk item yang dipilih di dalam container flex. Properti align-self menimpa perataan default yang ditetapkan oleh properti align-items di dalam container. Dalam contoh ini, menggunakan container setinggi 200 piksel, untuk mendemonstrasikan properti align-self dengan lebih baik. Contoh ini menyelaraskan item flex yang dipilih di tengah wada.Properti align-self menimpa properti alignitems dari wadah.
Contoh penggunaan align-self :
<!DOCTYPE html>
<html><head><style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}.flex-container > div {
background-color: maroon;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}</style></head><body>
<div class="flex-container">
<div>1</div><div>2</div>
<div style="align-self: center">3</div>
<div>4</div></div></body></html>
Sumber Referensi :