CSS3 Fleksibel Box
CSS3 Fleksibel Box adalah mode layout baru.
CSS3 Fleksibel Box (Kotak Fleksibel atau flexbox), saat halaman adalah kebutuhan untuk beradaptasi dengan ukuran layar dan jenis perangkat yang berbeda ketika elemen harus memastikan tata letak perilaku yang tepat.Tujuan memperkenalkan model tata letak kantong fleksibel adalah untuk memberikan cara yang lebih efisien untuk mengatur wadah sub-elemen, keselarasan dan distribusi ruang kosong.
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah peramban nomor -webkit- atau awalan-moz ditentukan.
| milik | |||||
|---|---|---|---|---|---|
| dukungan dasar (Single-line flexbox) | 29,0 21.0 -webkit- | 11.0 | 22.0 18,0 moz | 6.1 -webkit- | 12.1 -webkit- |
| Multisaluran flexbox | 29,0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15,0 -webkit- 12.1 |
Isi CSS3 Fleksibel Box
Kotak fleksibel terbuat dari wadah elastis (wadah Flex) dan elastis sub-elemen (item Flex) komponen.
Elastis kontainer dengan menyetel properti tampilan flex atau inline-flex akan didefinisikan sebagai wadah elastis.
Wadah elastis berisi satu atau lebih tangguh sub-elemen.
Catatan: wadah luar elastis dan elemen elastis adalah anak rendering normal. kotak fleksibel hanya mendefinisikan bagaimana tangguh elemen anak dalam tata letak wadah elastis.
Fleksibel sub-elemen biasanya ditampilkan dalam kotak garis elastis. Secara default, setiap kontainer hanya satu baris.
Berikut ini menunjukkan elemen elastis elemen anak ditampilkan dalam satu baris, kiri ke kanan:
contoh
<Html>
<Head>
<Gaya>
.flex-kontainer {
display: -webkit-flex;
display: melenturkan;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</ Style>
</ Kepala>
<Body>
<Div class = "flex-container">
<Div class = "flex-item"> fleksibel angka 1 </ div>
<Div class = "flex-item"> fleksibel item 2 </ div>
<Div class = "flex-item"> fleksibel angka 3 </ div>
</ Div>
</ Body>
</ Html>
Coba »
Tentu saja, kita dapat memodifikasi pengaturan.
Jika kita mengatur direction properti untuk rtl (kanan-ke-kiri), susunan elastis sub-elemen akan berubah, layout perubahan halaman juga diikuti:
contoh
arah: rtl;
}
.flex-kontainer {
display: -webkit-flex;
display: melenturkan;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
Coba »
flex-arah
flex-direction rangka menentukan sub-elemen elastis dalam wadah induk.
tatabahasa
flex-direction: row | row-reverse | column | column-reverse
flex-direction nilai-nilai adalah:
- baris: lateral dari kiri ke kanan (kiri), pengaturan default.
- baris-balik: membalikkan lateral sejajar (kanan-dibenarkan, maju dari barisan belakang, yang terakhir di atas.
- kolom: susunan vertikal.
- Kolom-membalikkan: membalikkan susunan vertikal, dari barisan belakang ke depan, dan akhirnya berturut-turut di atas.
Contoh berikut mengilustrasikan row-reverse digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-arah: baris-mundur;
flex-arah: baris-terbalik;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Contoh berikut menggambarkan column yang digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-arah: kolom;
flex-arah: kolom;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan column-reverse digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-arah: kolom-mundur;
flex-arah: kolom-terbalik;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
atribut membenarkan-konten
Konten keselarasan (membenarkan-konten) pada sifat elastis dari wadah aplikasi, elastis item kontainer elastis sejajar sepanjang sumbu utama (sumbu utama).
sintaks membenarkan-konten adalah sebagai berikut:
justify-content: flex-start | flex-end | center | space-between | space-around
Setiap analisis nilai:
- flex-start:
proyek fleksibel untuk baris pertama sebelah mengisi. Ini adalah default. Pertama utama-mulai dari tepi luar dari item elastis ditempatkan di tepi main-awal baris, dan siram berikutnya pada gilirannya ditempatkan istilah elastis.
- flex-end:
proyek fleksibel untuk akhir baris berikutnya untuk mengisi. Pertama item utama-end dari luar benang elastis ditempatkan di tepi main-akhir baris, dan siram berikutnya pada gilirannya ditempatkan istilah elastis.
- pusat:
Proyek fleksibel berpusat berikutnya untuk mengisi. (Jika ruang kosong yang tersisa adalah negatif, proyek ini juga akan meluap elastisitas di kedua arah).
- ruang-antara:
Proyek fleksibel merata pada baris. Jika ruang negatif atau hanya istilah elastis, nilai setara dengan flex-start. Jika tidak, main-mulai dari tepi luar dari baris pertama dan item penyelarasan elastis, sementara jalur utama-end dan sampingan marjin terakhir istilah keselarasan elastis dan distribusi barang-barang yang tersisa di garis elastis, yang berdekatan sama spasi item.
- ruang-sekitar:
Proyek fleksibel merata di telepon, di kedua sisi kiri setengah dari ruang. Jika ruang negatif atau hanya istilah elastis, nilai setara dengan pusat. Jika tidak, elastisitas proyek sepanjang jalur distribusi dan sama spasi dari satu sama lain (misalnya, 20px), sementara meninggalkan setengah dari interval (1/2 * 20px = 10px) antara kepala dan ekor di kedua sisi dan kontainer elastis.
Rendering menunjukkan:
Contoh berikut menunjukkan flex-end digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-membenarkan-konten: melenturkan-end;
membenarkan-konten: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan center menggunakan 's:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit membenarkan--konten: center;
membenarkan-konten: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan space-between penggunaan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit membenarkan--konten: ruang-antara;
membenarkan-konten: ruang-antara;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan space-around menggunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit membenarkan--konten: ruang-sekitar;
membenarkan-konten: ruang-sekitar;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
menyelaraskan-item properti
align-items mengatur atau mengambil elemen elastis di sisi kotak sumbu (sumbu vertikal) arah keselarasan.
tatabahasa
align-items: flex-start | flex-end | center | baseline | stretch
Setiap analisis nilai:
- flex-start: sisi batas kotak elemen poros elastis (sumbu vertikal) terhadap posisi awal dari sumbu sisi hidup dari batas garis start.
- flex-end: sisi batas elastis dari sumbu kotak elemen (sumbu vertikal) terhadap posisi awal untuk hidup sisi poros akhir batas garis.
- pusat: kotak elemen elastis ditempatkan di tengah-tengah sumbu line-side (sumbu vertikal) di. (Jika ukuran lebih kecil dari ukuran garis elastis dari elemen kotak, itu adalah sama panjang di kedua arah overflow).
- dasar: elemen kotak seperti poros batin elastis dan garis sisi poros yang sama, nilai 'flex-start' setara. Dalam kasus lain, nilai akan terlibat dalam keselarasan dasar.
- meregangkan: Jika ukuran atribut marjin kotak menentukan ukuran sisi poros 'auto', nilainya akan mendekati item baris sebagai ukuran, tetapi akan mengikuti properti 'min / max-lebar / tinggi' pembatasan.
Contoh berikut menunjukkan stretch(默认值) penggunaan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-align-item: peregangan;
menyelaraskan-item: peregangan;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan flex-start digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-align-item: melenturkan-start;
menyelaraskan-item: flex-start;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan flex-end digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-align-item: melenturkan-end;
menyelaraskan-item: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan center menggunakan 's:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-align-item: center;
menyelaraskan-item: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan baseline penggunaan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-align-item: dasar;
menyelaraskan-item: dasar;
width: 400px;
height: 250px;
background-color: lightgrey;
}
Coba »
Properti flex-wrap
atributflex-wrap digunakan untuk menentukan modus elemen bungkus kotak anak elastis.
tatabahasa
flex-flow: ||
Setiap analisis nilai:
- nowrap - Secara default, wadah elastis sebagai satu baris.Dalam hal ini anak tangguh mungkin meluap kontainer.
- membungkus - kontainer elastis beberapa baris.Bagian limpahan anak tangguh ditempatkan dalam hal ini untuk baris baru, baris internal yang istirahat akan terjadi subkey
- membungkus-membalik - urutan terbalik bungkus.
Contoh berikut menunjukkan nowrap penggunaan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan wrap penggunaan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-wrap: membungkus;
melenturkan-wrap: membungkus;
width: 300px;
height: 250px;
background-color: lightgrey;
}
Coba »
Contoh berikut menunjukkan wrap-reverse digunakan:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-wrap: wrap-mundur;
flex-wrap: wrap-mundur;
width: 300px;
height: 250px;
background-color: lightgrey;
}
Coba »
Atribut menyelaraskan-konten
align-content atribut digunakan untuk memodifikasi flex-wrap perilaku atribut. Mirip align-items , tetapi tidak mengatur alignment dari elastis sub-elemen, tetapi mengatur alignment dari setiap baris.
tatabahasa
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Setiap analisis nilai:
-
stretch- default. Setiap baris akan meregang untuk menempati ruang yang tersisa. -
flex-start- baris kotak ditumpuk ke posisi awal dari wadah elastis. -
flex-end- baris kotak ditumpuk untuk posisi akhir wadah elastis. -
center- baris kotak ditumpuk ke posisi tengah wadah elastis. -
space-between- wadah kantong fleksibel setiap baris merata. -
space-around- setiap baris dalam wadah kantong fleksibel merata antara kedua ujung untuk mempertahankan setengah dari sub-elemen dan sub-elemen jarak ukuran.
Contoh berikut menunjukkan center menggunakan 's:
contoh
display: -webkit-flex;
display: melenturkan;
-webkit-flex-wrap: membungkus;
melenturkan-wrap: membungkus;
-webkit-align-konten: center;
menyelaraskan-konten: center;
width: 300px;
height: 300px;
background-color: lightgrey;
}
Coba »
atribut sub-elemen yang fleksibel
urutan
tatabahasa
order:
Setiap analisis nilai:
- <Integer>: nilai integer yang digunakan untuk menentukan urutan di mana nilai kecil dari permukaan atas. Hal ini dapat negatif.
order untuk mengatur properti dalam sifat elastis dari elemen anak kontainer elastis:
contoh
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
}
Coba »
meluruskan
Pengaturan "margin" adalah "auto" nilai, secara otomatis mendapatkan wadah elastis di ruang yang tersisa. Jadi mengatur nilai marjin vertikal "auto", memungkinkan elastis sub-elemen yang benar-benar terfokus pada arah dua sumbu wadah elastis.
Contoh berikut yang pertama elemen sub-elastis set margin-right: auto; . Ruang yang tersisa akan ditempatkan di elemen yang tepat:
contoh
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item: pertama-anak {
margin-right: auto;
}
Coba »
pusat sempurna
Contoh berikut akan menjadi solusi yang tepat untuk masalah biasa kita temui pusat.
box elastis, pusat menjadi sangat sederhana, hanya ingin mengatur margin: auto; dapat membuat elastis sub-elemen dalam arah aksial pada dua sempurna berpusat:
contoh
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
Coba »
menyelaraskan diri
align-self atribut digunakan untuk mengatur arah penyelarasan elemen elastis itu sendiri di sisi sumbu (sumbu vertikal).
tatabahasa
align-self: auto | flex-start | flex-end | center | baseline | stretch
Setiap analisis nilai:
- auto: Jika 'menyelaraskan diri' nilai 'auto', nilai yang dihitung dari elemen induk elemen 'menyelaraskan-item' nilai, jika tidak memiliki orang tua, nilai yang dihitung dari 'stretch'.
- flex-start: sisi batas kotak elemen poros elastis (sumbu vertikal) terhadap posisi awal dari sumbu sisi hidup dari batas garis start.
- flex-end: sisi batas elastis dari sumbu kotak elemen (sumbu vertikal) terhadap posisi awal untuk hidup sisi poros akhir batas garis.
- pusat: kotak elemen elastis ditempatkan di tengah-tengah sumbu line-side (sumbu vertikal) di. (Jika ukuran lebih kecil dari ukuran garis elastis dari elemen kotak, itu adalah sama panjang di kedua arah overflow).
- dasar: elemen kotak seperti poros batin elastis dan garis sisi poros yang sama, nilai 'flex-start' setara. Dalam kasus lain, nilai akan terlibat dalam keselarasan dasar.
- meregangkan: Jika ukuran atribut marjin kotak menentukan ukuran sisi poros 'auto', nilainya akan mendekati item baris sebagai ukuran, tetapi akan mengikuti properti 'min / max-lebar / tinggi' pembatasan.
Contoh berikut menunjukkan elastis sub-elemen menyelaraskan diri efek penerapan nilai-nilai yang berbeda:
contoh
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-diri: melenturkan-start;
menyelaraskan diri: flex-start;
}
.item2 {
-webkit-align-diri: melenturkan-end;
menyelaraskan diri: flex-end;
}
.item3 {
-webkit-align-diri: center;
menyelaraskan diri: center;
}
.item4 {
-webkit-align-diri: dasar;
menyelaraskan diri: dasar;
}
.item5 {
-webkit-align-diri: peregangan;
menyelaraskan diri: peregangan;
}
Coba »
melenturkan
flex atribut digunakan untuk menentukan bagaimana mengalokasikan ruang untuk elastis sub-elemen.
tatabahasa
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Setiap analisis nilai:
- none: none menghitung kata kunci: 0 0 auto
- [Flex-tumbuh]: definisi rasio ekspansi kotak elemen elastis.
- [Flex-menyusut]: definisi rasio penyusutan kotak elemen elastis.
- [Flex-dasar]: Nilai referensi standar mendefinisikan elemen elastis kotak.
Contoh berikut, elemen sub-elastis pertama menempati 2/4 dari ruang, dua lainnya masing-masing 1/4 Space:
contoh
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
melenturkan: 2;
}
.item2 {
-webkit-flex: 1;
melenturkan: 1;
}
.item3 {
-webkit-flex: 1;
melenturkan: 1;
}
Coba »
contoh yang lebih
Buat halaman responsif menggunakan kotak elastis
CSS3 Fleksibel Properti kotak
Daftar tabel berikut biasa digunakan untuk kotak dalam sifat elastis:
| milik | deskripsi |
|---|---|
| pameran | Menentukan HTML kotak jenis elemen. |
| flex-arah | Tentukan bagaimana mengatur unsur-unsur neutron kontainer elastis |
| membenarkan-konten | Sebuah elemen elastis dalam kotak spindle (horizontal) arah keselarasan. |
| menyelaraskan-item | Sebuah elemen elastis di sumbu sisi kotak (sumbu vertikal) arah keselarasan. |
| flex-wrap | Apakah elastis wrap kotak sub-elemen di luar wadah induk. |
| menyelaraskan-konten | Mengubah perilaku properti flex-wrap, mirip dengan menyelaraskan-barang, tapi tidak mengatur sub-elemen yang selaras, tetapi keselarasan dari garis set |
| flex-aliran | flex-arah dan flex-wrap singkatan |
| pesanan | Sebuah kotak elastis agar elemen anak. |
| menyelaraskan diri | Gunakan elemen anak tangguh. Tutup wadah menyelaraskan-item properti. |
| melenturkan | Cara mengatur elemen kotak anak elastis ruang yang dialokasikan. |