Kotak Flex CSS3
Kotak Flex ialah mod reka letak baharu CSS3.
Kotak Fleksibel CSS3 (Kotak Fleksibel atau flexbox) ialah kaedah reka letak yang memastikan elemen mempunyai gelagat yang sesuai apabila halaman perlu menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza.
Tujuan memperkenalkan model susun atur flexbox adalah untuk menyediakan cara yang lebih cekap untuk menyusun, menjajarkan dan memperuntukkan ruang kosong kepada sub-elemen dalam bekas.
Kandungan kotak fleksibel CSS3
Kotak fleksibel terdiri daripada bekas fleksibel (bekas fleksibel) dan elemen anak fleksibel (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: Di luar bekas fleksibel dan dalam elemen kanak-kanak fleksibel dipaparkan 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 bagi setiap bekas.
Elemen berikut menunjukkan bahawa subelemen elastik dipaparkan dalam satu baris, dari kiri ke kanan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>Yang berikut akan menerangkan setiap atribut versi lama melalui contoh mudah:
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>Keputusan di atas adalah normal Lihat contoh berikut:
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
div{
display:-webkit-box;
display:box;
}
</style>
</head>
<body>
<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>Lihat, kini setiap elemen p telah menjadi satu kotak.
Dalam perkara di atas, kami menetapkan paparan elemen div ke kotak, yang merupakan versi lama reka letak fleksibel. Untuk versi penyemak imbas yang lebih lama, kita perlu menambah awalan -webkit-.
Versi lama reka letak anjal mempunyai dua nilai atribut:
kotak: paparkan model kotak bekas sebagai kotak pengembangan anjal peringkat blok: paparkan model kotak bekas sebagai kotak pengembangan anjal peringkat sebaris Paparan kotak
PS: Kami tahu bahawa tahap blok menduduki keseluruhan baris, seperti elemen div manakala tahap sebaris tidak menduduki keseluruhan baris, seperti elemen span. Tetapi kami menyediakan keseluruhan kotak supaya tiada seorang pun daripada mereka yang mendudukinya, memastikan ia konsisten. Sama seperti contoh kami di atas, jika kotak ditetapkan untuk elemen div, maka elemen p di dalam elemen div tidak akan diduduki.
atribut orientasi kotak
atribut orientasi kotak terutamanya merealisasikan arah aliran elemen di dalam kotak.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}Hasilnya pada masa ini ialah susunan menegak:
Nilai atribut bagi atribut ini ialah:
mendatar : item teleskopik dari kiri ke Kanan susunan mendatar menegak: Item fleksibel disusun secara menegak dari atas ke bawah paksi sebaris: Item fleksibel disusun sepanjang paksi sebaris dan dipaparkan paksi blok: Item fleksibel disusun dan dipaparkan di sepanjang paksi blok
Anda mungkin ingin mencuba: paksi mendatar dan sebaris disusun secara mendatar, manakala paksi menegak dan blok disusun secara menegak.
atribut arah kotak
Atribut arah kotak digunakan terutamanya untuk menetapkan susunan aliran dalam bekas boleh skala.
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}Nilai atribut bagi atribut ini ialah:
normal: tertib biasa, nilai lalai terbalik: terbalik tertib
atribut pek kotak
Pek kotak Hartanah yang digunakan untuk mengedarkan item berskala.
Nilai atribut atribut ini ialah:
mula : Item lentur diselaraskan dengan hujung titik permulaan : Item lentur diselaraskan dengan pusat titik akhir : Item lentur adalah diselaraskan dengan justify titik tengah : Item flex diselaraskan dengan taburan Ikatan titik tengah
Mari cuba kesan setiap nilai atribut:
nilai atribut mula:
div{
-webkit-box-pack:start;
box-pack:start;
}2. nilai atribut akhir:
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}3 nilai atribut tengah:
div{
-webkit-box-pack:
center
;
box-pack:
center
;
}4 >PS: Prinsip yang sama adalah benar dalam arah menegak, tetapi jika ketinggian Jika ia adalah auto, kesannya tidak akan dihasilkan. Jadi anda perlu menetapkan ketinggian tetap untuk ketinggian (sebaik-baiknya lebih tinggi daripada lalai). Pada masa ini, anda boleh melihat kesan dalam arah menegak. Saya tidak akan pergi ke butiran di sini.
atribut penjajaran kotak
Atribut penjajaran kotak digunakan untuk mengendalikan ruang tambahan bekas boleh skala.
Nilai atribut bagi atribut ini ialah:
mula ： Projek boleh skala adalah berdasarkan bahagian atas, mengosongkan ruang tambahan di hujung bahagian bawah ： Projek boleh skala adalah berdasarkan di bahagian bawah, mengosongkan ruang tambahan di bahagian tengah bahagian atas ： Projek berskala adalah berdasarkan bahagian bawah Bahagian tengah digunakan sebagai garis dasar, dan ruang tambahan di bahagian atas dan bawah dikosongkan secara purata projek adalah berdasarkan garis dasar, dan ruang tambahan dikosongkan: Projek flex mengisi keseluruhan bekas adalah
Begitu juga, kami akan mencuba setiap nilai atribut:
1.start nilai atribut
div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}2.end attribute value
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
}3.center attribute value
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}4.baseline attribute value
If orientasi kotak ialah paksi tunggal sebaris atau mendatar, semua elemen kanak-kanak dijajarkan dengan garis dasarnya.
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}Dan jika orientasi kotak ialah paksi blok atau menegak, maka semua elemen anak akan dipusatkan dan disusun secara menegak.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
}
5.regangkan nilai atribut
Semua elemen kanak-kanak meregang untuk mengisi blok yang mengandungi.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
}
sifat box-flex
Sifat box-flex boleh menggunakan nombor titik terapung untuk memperuntukkan perkadaran item boleh skala. Atribut ini ditetapkan untuk item dalam bekas Mereka akan memperuntukkan bahagiannya berdasarkan lebar bekas induk:
div{
display:-webkit-box;
display:box;
-webkit-box-align:stretch;
box-align:stretch
;}Sudah tentu, sesetengah item boleh mempunyai lebar tetap dan item lain juga akan diperuntukkan . Baki lebar, sebagai contoh, elemen p pertama di sini ditetapkan kepada lebar tetap:
p:nth-child(1){
-webkit-box-flex:1;
box-flex:1;
}p:nth-child(2){
-webkit-box-flex:3;
box-flex:3;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}
Untuk lebih banyak penggunaan, anda boleh mencubanya sendiri perlahan-lahan.
atribut box-ordinal-group
box-ordinal-group attribute boleh menetapkan kedudukan paparan item flex.
p:nth-child(2){
-webkit-box-flex:2;
box-flex:2;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}Anda boleh lihat: elemen p pertama berada pada kedudukan kedua, elemen p kedua berada pada kedudukan ketiga, dan elemen p ketiga berada pada kedudukan pertama. Atribut ini boleh ditetapkan secara individu untuk elemen p, dan item lain akan ditukar dalam susunan asal.
OK, maka semua atribut versi lama telah diperkenalkan secara ringkas Untuk penggunaan gabungan yang lebih banyak, anda boleh mengamalkannya sendiri mengikut keperluan.
Berikut ialah contoh pemusatan mendatar dan menegak:
p:nth-child(1){
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}p:nth-child(2){
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}p:nth-child(3){
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}Pada masa ini, kami menetapkan ketinggian tetap untuk elemen p:
div{
display:-webkit-box;
display:box;
height:500px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
}Atribut kotak fleksibel CSS3
Seterusnya jadual menyenaraikan atribut yang biasa digunakan dalam kotak fleksibel:
Atribut 🎜> paparan untuk menentukan jenis kotak elemen HTML.
arah lentur menentukan susunan sub-elemen dalam bekas lentur
<> Perintah menetapkan susunan susunan sub-elemen kotak elastik. Untuk digunakan pada unsur -unsur kanak -kanak flex. Gantikan sifat item penjajaran kontena.
