Reka letak ialah bahagian yang sangat penting dalam reka bentuk gaya aplikasi web. Reka letak digunakan untuk menentukan saiz dan kedudukan komponen dan elemen yang berbeza pada halaman. Dengan populariti antara muka pengguna yang responsif, aplikasi web secara amnya diperlukan untuk menyesuaikan diri dengan saiz peranti dan resolusi penyemak imbas yang berbeza. Aspek yang paling penting dalam reka bentuk antara muka pengguna responsif ialah reka letak. Susun atur perlu dilaraskan mengikut saiz tetingkap, dengan itu mengubah saiz dan kedudukan komponen untuk mencapai kesan paparan terbaik. Ini juga menjadikan logik susun atur lebih kompleks.
Artikel ini memperkenalkan model reka letak baharu yang diperkenalkan dalam spesifikasi CSS3: model kotak fleksibel. Model flexbox boleh memenuhi banyak keperluan susun atur kompleks biasa dengan cara yang mudah. Kelebihannya ialah pembangun hanya mengisytiharkan tingkah laku yang sepatutnya ada pada susun atur, tanpa memberikan kaedah pelaksanaan khusus. Penyemak imbas bertanggungjawab untuk melakukan susun atur sebenar. Model reka letak ini disokong dalam pelayar utama.
Kandungan Kotak Fleksibel CSS3
Fleksibel Kotak itu terdiri daripada bekas Flex dan item Flex.
Bekas fleksibel ditakrifkan sebagai bekas fleksibel dengan menetapkan nilai sifat paparan kepada flex atau inline-flex.
Bekas fleksibel mengandungi satu atau lebih elemen anak fleksibel.
Nota: Bahagian luar bekas fleksibel dan dalam subelemen fleksibel ditunjukkan secara normal. Kotak lentur hanya mentakrifkan cara elemen anak lentur dibentangkan dalam bekas lentur.
Elemen kanak-kanak fleksibel biasanya dipaparkan dalam satu baris dalam kotak fleksibel. Secara lalai hanya terdapat satu baris setiap bekas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 150px;
background-color: yellow;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"> 1</div>
<div class="flex-item"> 2</div>
<div class="flex-item"> 3</div>
</div>
</body>
</html>sifat arah lentur
Menetapkan atau mendapatkan semula elemen anak lentur objek kotak Kedudukan dalam bekas induk.
Sintaks
arah lentur: baris | lajur-balik | 🎜>
baris: disusun secara mendatar dari kiri ke kanan (dijajar ke kiri), kaedah susunan lalai.
Pelayar menyokong
< Firefox, Opera dan Chrome menyokong atribut flex-direction
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>justify-content atribut menetapkan atau mendapatkan semula penjajaran elemen kotak fleksibel dalam arah paksi utama (paksi mendatar) Sifat ini juga mengawal penjajaran apabila elemen melimpah baris.
Sintaks
kandungan justify: flex-start | tengah-ruang-antara
flex-start: Elemen kotak flex akan dijajarkan dengan permulaan baris. Tepi permulaan utama anak pertama baris akan diselaraskan dengan tepi permulaan utama baris dan semua item flex seterusnya akan diselaraskan dengan item sebelumnya.
flex-end: Elemen kotak flex akan dijajarkan ke hujung baris. Tepi hujung utama elemen anak pertama baris akan diselaraskan dengan tepi hujung utama baris dan semua item flex seterusnya akan diselaraskan dengan item sebelumnya.
tengah: Elemen kotak fleksibel akan dijajarkan ke tengah baris. Elemen anak baris akan dijajarkan antara satu sama lain dan berpusat di dalam baris, dengan elemen pertama mempunyai sebanyak jidar dari kedudukan permulaan utama baris seperti yang dimiliki oleh elemen terakhir dari kedudukan akhir utama baris (jika ruang yang tinggal adalah negatif , maka limpahan panjang yang sama pada kedua-dua hujung dikekalkan).
ruang-antara: Elemen Flexbox akan diagihkan sama rata dalam baris. Jika ruang yang tinggal paling kiri negatif, atau baris hanya mempunyai satu anak, nilai ini bersamaan dengan 'flex-start'. Dalam kes lain, jidar elemen pertama diselaraskan dengan jidar permulaan utama garisan, manakala jidar elemen terakhir diselaraskan dengan jidar hujung utama garisan, dan item flex yang selebihnya diagihkan sama rata, dan Pastikan terdapat ruang putih yang sama antara dua.
ruang-sekitar: Elemen kotak fleksibel akan diagihkan sama rata dalam baris, meninggalkan separuh daripada ruang antara sub-elemen di kedua-dua hujungnya. Jika ruang paling kiri yang tinggal adalah negatif, atau terdapat hanya satu item flexbox dalam baris, nilai ini bersamaan dengan 'tengah'. Dalam kes lain, item kotak flex dijarakkan sama rata, dengan ruang putih yang sama di antara mereka, dengan separuh ruang sebelum elemen pertama dan separuh ruang selepas elemen terakhir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>harta benda jajarkan
Tetapkan atau dapatkan semula elemen flexbox pada salib paksi Penjajaran dalam arah (paksi menegak).
Sintaks
item sejajar: flex-start | regangan
flex-start: Sempadan kedudukan permulaan paksi silang (paksi menegak) elemen kotak lentur adalah berhampiran dengan sempadan permulaan paksi silang bagi barisan itu.
hujung lentur: Sempadan kedudukan permulaan paksi silang (paksi menegak) elemen kotak lentur adalah berhampiran dengan sempadan hujung paksi silang baris.
pusat: Elemen flexbox berpusat pada paksi silang (paksi menegak) baris. (Jika saiz baris lebih kecil daripada saiz elemen flexbox, ia akan melimpah panjang yang sama dalam kedua-dua arah).
garis dasar: Jika paksi sebaris dan paksi silang bagi elemen kotak fleksibel adalah sama, nilai ini bersamaan dengan 'fleks-mula'. Jika tidak, nilai ini akan mengambil bahagian dalam penjajaran garis dasar.
regangan: Jika nilai atribut yang menyatakan saiz paksi silang ialah 'auto', nilainya akan menjadikan saiz kotak margin item sehampir mungkin dengan saiz baris, tetapi pada masa yang sama ia akan mematuhi dengan 'min/max-width/height' 'Sekatan atribut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}
</style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>harta flex-wrap
Menetapkan atau mendapatkan semula elemen anak flex objek kotak Sama ada hendak membalut apabila melebihi bekas induk.
Sintaksis
balut lentur: nowrap-balikkan
nowrap: Jangan balut apabila elemen anak melimpahi bekas induk.
balut: Balut secara automatik apabila elemen anak melimpahi bekas induk.
balut-terbalik: Terbalikkan susunan pembalut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>atribut jajar-kandungan
Menetapkan atau mendapatkan semula Penjajaran baris flex tindanan flexbox .
Syntax
kandungan flex-start |. antara |. ruang-keliling |. Tepi permulaan paksi silang bagi baris pertama dalam bekas flexbox bersebelahan dengan tepi permulaan paksi silang bekas flexbox, dan setiap baris berikutnya bersebelahan dengan baris sebelumnya.
flex-end: Setiap baris disusun ke arah hujung bekas kotak flex. Sempadan hujung paksi silang bagi baris terakhir dalam bekas flexbox adalah berhampiran dengan sempadan hujung paksi silang bekas flexbox, dan setiap baris berikutnya adalah dekat dengan baris sebelumnya.
regangan: Setiap baris akan meregang untuk mengambil ruang yang tinggal. Jika ruang yang tinggal adalah negatif, nilai ini bersamaan dengan 'flex-start'. Dalam kes lain, ruang yang tinggal dibahagikan sama rata antara semua baris untuk mengembangkan saiz paksi silangnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-direction:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>harta pesanan
Menetapkan atau mendapatkan semula kejadian elemen anak kotak flex susunan objek model.
Sintaks
pesanan: <integer>
<integer> : Gunakan nilai integer untuk menentukan susunan isihan, dengan nilai yang lebih kecil disenaraikan dahulu. Boleh jadi negatif.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>atribut align-self
Menetapkan atau mendapatkan semula elemen flexbox itu sendiri pada Jajaran sisi sepanjang paksi (paksi menegak).
Sintaks
selaraskan diri: auto | flex-end |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-align-items: flex-end;
height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2){
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3){
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4){
-webkit-align-self: baseline;
align-self: baseline;
padding:20px 10px;
}
.box li:nth-child(5){
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6){
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7){
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</body>
</html>atribut lentur
atribut majmuk. Menetapkan atau mendapatkan semula cara elemen kanak-kanak bagi objek kotak fleksibel memperuntukkan ruang.
Sintaksis
[ flex-shrink ]: Tentukan nisbah pengecutan elemen kotak flex.
[ flex-basis ]: Mentakrifkan nilai asas lalai bagi elemen kotak flex.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
max-width:400px;height:100px;margin:10px 0 0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{background:#aaa;text-align:center;}
.box li:nth-child(1){background:#999;}
.box li:nth-child(2){background:#aaa;}
.box li:nth-child(3){background:#ccc;}
#box li:nth-child(1){-webkit-flex:1;flex:1;}
#box li:nth-child(2){-webkit-flex:1;flex:1;}
#box li:nth-child(3){-webkit-flex:1;flex:1;}
#box2 li:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
#box2 li:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
#box2 li:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
#box3{max-width: 800px;}
#box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
#box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
#box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}
</style>
</head>
<body>
<ul id="box" class="box">
<li>flex:1;</li>
<li>flex:1;</li>
<li>flex:1;</li>
</ul>
<ul id="box2" class="box">
<li>flex:1 0 100px;</li>
<li>flex:2 0 100px;</li>
<li>flex:3 0 100px;</li>
</ul>
<ul id="box3" class="box">
<li>flex:1 1 400px;</li>
<li>flex:1 2 400px;</li>
<li>flex:1 2 400px;</li>
</ul>
</body>
</html>