站長(zhǎng)資訊網(wǎng)
css3布局屬性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、order、flex-grow、flex-shrink等等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。
1、彈性盒模型（Flexible Box 或Flexbox）
彈性盒模型最大的特征在于，能夠動(dòng)態(tài)修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當(dāng)布局。
（1）彈性容器屬性
flex-direction：設(shè)置主軸方向，確定彈性子元素排列方式
flex-wrap：當(dāng)彈性子元素超出彈性容器范圍時(shí)是否換行
flex-flow：flex-direction和flex-wrap屬性的快捷方式，復(fù)合屬性
justify-content：主軸上的對(duì)齊方式
align-items：側(cè)軸上的對(duì)齊方式
align-content：側(cè)軸上有空白時(shí)，側(cè)軸的對(duì)齊方式
（2）彈性子元素屬性
order：控制彈性容器里子元素的順序
flex-grow：設(shè)置彈性子元素的擴(kuò)展比率
flex-shrink：設(shè)置彈性子元素的收縮比率、
flex-basis：指定彈性子元素伸縮前的默認(rèn)大小值，相當(dāng)于width和height屬性
flex：flex-grow,flex-shrink和flex-basis屬性的復(fù)合屬性
align-self：允許獨(dú)立的彈性子元素覆蓋彈性容器的默認(rèn)對(duì)齊設(shè)置
Flexbox菜單項(xiàng)目實(shí)戰(zhàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flexbox</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 響應(yīng)式菜單html架構(gòu)，emmet的方式進(jìn)行簡(jiǎn)寫 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; } }
2、多列詳解
屬性一覽：
columns：復(fù)合屬性（column-width和column-count),設(shè)置寬度和列數(shù)；
column-width:設(shè)置每列的寬度
column-count：設(shè)置列數(shù)
column-gap：設(shè)置列之間的間隙
column-rule：復(fù)合屬性（column-rule-width、column-rule-style、column-rule-color），設(shè)置列之間的邊框樣式
column-fill：設(shè)置列的高度是否統(tǒng)一
column-span：設(shè)置是否橫跨所有列
3、媒體查詢
最佳實(shí)踐方式：
/*超小屏幕（手機(jī)，小于768px)*/ /*沒有任何媒體查詢相關(guān)的代碼，移動(dòng)設(shè)備優(yōu)先*/ /*小屏幕（平板，大小等于768）*/ @media (min-width: 768px) { } /*中等屏幕（桌面顯示器，大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕（大桌面顯示器，大于等于1200px)*/ @media (min-width: 1200px) { }
（學(xué)習(xí)視頻分享：css視頻教程、web前端入門教程）
