Rumah > Artikel > hujung hadapan web > Apakah sifat susun atur css3?
Atribut reka letak css3 termasuk: flex-direction, flex-wrap, flex-flow, justify-content, align-item, align-content, order, flex-grow, flex-shrink, dsb.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3, komputer Dell G3.
1 Kotak Fleksibel atau Flexbox
Ciri terbesar model kotak fleksibel ialah ia boleh mengubah suai lebar sub-elemen secara dinamik dan ketinggian untuk memenuhi reka letak yang sesuai pada saiz skrin yang berbeza.
(1) Sifat bekas fleksibel
arah-flex: Tetapkan arah paksi utama dan tentukan susunan sub-elemen elastik
flex- balut: Apabila anjal Sama ada elemen anak membalut apabila ia melebihi skop bekas fleksibel
aliran lentur: pintasan untuk atribut arah lentur dan balut lentur, atribut majmuk
kandungan justify : penjajaran pada paksi utama
item penjajaran: Penjajaran pada paksi silang
kandungan penjajaran: Penjajaran pada paksi silang apabila terdapat ruang pada paksi silang
(2) Atribut sub Elemen elastik
tertib: Kawal susunan sub-elemen dalam bekas fleksibel
flex-grow: Tetapkan nisbah pengembangan bagi subelemen anjal
kecutan lentur: Tetapkan subelemen anjal Nisbah pengecutan unsur,
asas lentur: Menentukan nilai saiz lalai subelemen anjal sebelum regangan , bersamaan dengan atribut lebar dan tinggi
flex: flex-grow, flex-shrink dan flex- Atribut komposit bagi atribut asas
align-self: membenarkan sub-elemen flex bebas mengatasi tetapan penjajaran lalai bekas flex
Pertempuran sebenar item menu Flexbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flexbox</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 响应式菜单html架构,emmet的方式进行简写 ul.menu>li*6>a[href="#"]{HTML} --> <ul class="menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Ruby</a></li> <li><a href="#">Mongo</a></li> </ul> </body> </html>
.menu{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; } .menu li{ height: 40px; text-align: center; line-height: 40px; flex: 1 1 100%; } .menu li:nth-child(1){ background-color: #39ADD1; } .menu li:nth-child(2){ background-color: #3079AB; } .menu li:nth-child(3){ background-color: #982551; } .menu li:nth-child(4){ background-color: #E15258; } .menu li:nth-child(5){ background-color: #CC6699; } .menu li:nth-child(6){ background-color: #52AC43; } @media (min-width:480px) { .menu li{ flex: 1 1 50%; } } @media (min-width:768px) { .menu{ flex-flow: row nowrap; } }
Penjelasan terperinci berbilang lajur
lajur: atribut komposit (lebar lajur dan kiraan lajur ), tetapkan lebar dan bilangan lajur
lajur -lebar: tetapkan lebar setiap lajur
kiraan lajur: tetapkan bilangan lajur
jurang lajur: tetapkan jarak antara lajur Jurang
peraturan lajur: Atribut komposit (lebar-peraturan-lajur, gaya-peraturan-lajur, warna-peraturan-lajur), tetapkan gaya sempadan antara lajur
isi lajur : Tetapkan sama ada ketinggian lajur adalah seragam
jalur-jalur: Tetapkan sama ada ia menjangkau semua lajur
Amalan terbaik:
/*超小屏幕(手机,小于768px)*/ /*没有任何媒体查询相关的代码,移动设备优先*/ /*小屏幕(平板,大小等于768)*/ @media (min-width: 768px) { } /*中等屏幕(桌面显示器,大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕(大桌面显示器,大于等于1200px)*/ @media (min-width: 1200px) { }
(Belajar perkongsian video: tutorial video css , tutorial pengenalan bahagian hadapan web)
Atas ialah kandungan terperinci Apakah sifat susun atur css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!