CSS3 Flexbox
Kotak fleksibel, atau flexbox , adalah mode layout baru di CSS3.
Penggunaan flexbox memastikan bahwa unsur-unsur berperilaku diduga ketika tata letak halaman harus mengakomodasi ukuran layar yang berbeda dan perangkat tampilan yang berbeda.
Untuk banyak aplikasi, model kotak fleksibel memberikan perbaikan atas model blok dalam hal itu tidak menggunakan mengapung, juga tidak margin wadah fleksibel runtuh dengan margin dari isinya.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fitur tersebut.
Nomor diikuti oleh -webkit- atau -moz- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Konsep
Flexbox terdiri dari wadah fleksibel dan item fleksibel.
Sebuah wadah fleksibel dinyatakan dengan menetapkan display milik elemen baik flex (diberikan sebagai blok) atau inline-flex (diterjemahkan sebagai inline).
Di dalam wadah fleksibel ada satu atau lebih item fleksibel.
Catatan: Segala sesuatu di luar wadah fleksibel dan di dalam item fleksibel diberikan seperti biasa. Flexbox mendefinisikan bagaimana item fleksibel diletakkan di dalam wadah fleksibel.
item Flex diposisikan dalam sebuah wadah fleksibel sepanjang garis fleksibel. Secara default hanya ada satu baris fleksibel per kontainer fleksibel.
Contoh berikut menunjukkan tiga item fleksibel. Mereka diposisikan secara default: sepanjang garis fleksibel horisontal, dari kiri ke kanan:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>Hal ini juga memungkinkan untuk mengubah arah dari garis fleksibel.
Jika kita mengatur direction properti untuk rtl (kanan-ke-kiri), teks ditarik kanan ke kiri, dan juga garis fleksibel mengubah arah, yang akan mengubah tata letak halaman:
Contoh
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Arah Flex
The flex-direction properti menentukan arah item fleksibel dalam wadah fleksibel. Nilai default dari flex-direction adalah row (kiri ke kanan, atas-ke-bawah).
Nilai-nilai lain adalah sebagai berikut:
-
row-reverse- Jika tulisan-mode (arah) yang kiri ke kanan, item fleksibel akan ditata kanan ke kiri -
column- Jika sistem penulisan adalah horisontal, item fleksibel akan ditata secara vertikal -
column-reverse- Sama seperti kolom, tapi dibalik
Contoh berikut menunjukkan hasil dari menggunakan row-reverse nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan column nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan column-reverse nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Properti membenarkan-konten
The justify-content properti horizontal sejajar item wadah fleksibel ketika item tidak menggunakan semua ruang yang tersedia pada main-axis.
Nilai yang mungkin adalah sebagai berikut:
-
flex-start- Nilai default. Produk yang diposisikan pada awal wadah -
flex-end- Produk diposisikan pada akhir wadah -
center- Produk yang diposisikan di tengah wadah -
space-between- Produk diposisikan dengan ruang antara garis -
space-around- Produk diposisikan dengan ruang sebelumnya, antara, dan setelah garis
Contoh berikut menunjukkan hasil dari menggunakan flex-end nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan center nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan space-between nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan space-around nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Align-item Properti
The align-items properti vertikal sejajar item wadah fleksibel ketika item tidak menggunakan semua ruang yang tersedia di kayu salib sumbu.
Nilai yang mungkin adalah sebagai berikut:
-
stretch- Nilai default. Produk yang ditarik agar sesuai wadah -
flex-start- Produk yang diposisikan di atas wadah -
flex-end- Produk yang diposisikan di bagian bawah wadah -
center- Produk yang diposisikan di tengah wadah (vertikal) -
baseline- Produk yang diposisikan pada dasar wadah
Contoh berikut menunjukkan hasil dari menggunakan stretch nilai (ini adalah nilai default):
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan flex-start value:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan flex-end nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan center nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan baseline nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Flex-wrap Properti
The flex-wrap properti menentukan apakah item fleksibel harus membungkus atau tidak, jika tidak ada cukup ruang untuk mereka pada satu baris fleksibel.
Nilai yang mungkin adalah sebagai berikut:
-
nowrap- Nilai default. Item fleksibel tidak akan membungkus -
wrap- Item fleksibel akan membungkus jika perlu -
wrap-reverse- Item fleksibel akan membungkus, jika perlu, dalam urutan terbalik
Contoh berikut menunjukkan hasil dari menggunakan nowrap nilai (ini adalah nilai default):
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan wrap nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Contoh berikut menunjukkan hasil dari menggunakan wrap-reverse nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} Properti menyelaraskan-konten
The align-content properti memodifikasi perilaku flex-wrap properti. Hal ini mirip dengan align-items , tapi bukannya menyelaraskan item flex, itu sejalan garis fleksibel.
Nilai yang mungkin adalah sebagai berikut:
-
stretch- Nilai default. Garis peregangan untuk mengambil ruang yang tersisa -
flex-start- Garis yang dikemas ke awal wadah fleksibel -
flex-end- Garis dikemas menjelang akhir wadah fleksibel -
center- Garis dikemas menuju pusat wadah fleksibel -
space-between- Garis merata dalam wadah fleksibel -
space-around- Garis merata dalam wadah fleksibel, dengan ruang setengah ukuran pada kedua ujung
Contoh berikut menunjukkan hasil dari menggunakan center nilai:
Contoh
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Flex Barang Properti
Pemesanan
The order properti menentukan urutan item relatif fleksibel untuk sisa barang yang fleksibel di dalam wadah yang sama:
Contoh
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Batas
Pengaturan margin: auto; akan menyerap ruang ekstra. Hal ini dapat digunakan untuk mendorong item fleksibel dalam posisi yang berbeda.
Pada contoh berikut kita mengatur margin-right: auto; pada item fleksibel pertama. Hal ini akan menyebabkan semua ruang ekstra untuk diserap ke kanan elemen yang:
Contoh
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} Pemusatan sempurna
Pada contoh berikut kita akan memecahkan masalah hampir setiap hari: centering sempurna.
Hal ini sangat mudah dengan flexbox. Pengaturan margin: auto; akan membuat item berpusat sempurna di kedua sumbu:
Contoh
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} menyelaraskan diri
The align-self milik item fleksibel menimpa properti menyelaraskan-item wadah fleksibel untuk item tersebut. Ini memiliki kemungkinan nilai sama dengan align-items properti.
Contoh berikut menetapkan nilai-nilai menyelaraskan diri yang berbeda untuk setiap item fleksibel:
Contoh
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} melenturkan
The flex properti menentukan panjang item flex, relatif terhadap seluruh item fleksibel dalam wadah yang sama.
Pada contoh berikut, item fleksibel pertama akan mengkonsumsi 2/4 dari ruang bebas, dan dua item fleksibel lainnya akan mengkonsumsi 1/4 dari ruang bebas masing-masing:
Contoh
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Contoh lebih
Membuat website responsif dengan flexbox
Contoh ini menunjukkan cara membuat layout website responsif dengan flexbox.
CSS3 flexbox Properti
Tabel berikut berisi daftar properti CSS digunakan dengan flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |