本篇內容主要講解“css3有哪些布局屬性”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css3有哪些布局屬性”吧!
css3布局屬性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、order、flex-grow、flex-shrink等等。
本教程操作環境：windows7系統、CSS3版、Dell G3電腦。
1、彈性盒模型（Flexible Box 或Flexbox）
彈性盒模型最大的特征在于，能夠動態修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當布局。
（1）彈性容器屬性
flex-direction：設置主軸方向，確定彈性子元素排列方式
flex-wrap：當彈性子元素超出彈性容器范圍時是否換行
flex-flow：flex-direction和flex-wrap屬性的快捷方式，復合屬性
justify-content：主軸上的對齊方式
align-items：側軸上的對齊方式
align-content：側軸上有空白時，側軸的對齊方式
（2）彈性子元素屬性
order：控制彈性容器里子元素的順序
flex-grow：設置彈性子元素的擴展比率
flex-shrink：設置彈性子元素的收縮比率、
flex-basis：指定彈性子元素伸縮前的默認大小值，相當于width和height屬性
flex：flex-grow,flex-shrink和flex-basis屬性的復合屬性
align-self：允許獨立的彈性子元素覆蓋彈性容器的默認對齊設置
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;
}
}2、多列詳解
columns：復合屬性（column-width和column-count),設置寬度和列數；
column-width:設置每列的寬度
column-count：設置列數
column-gap：設置列之間的間隙
column-rule：復合屬性（column-rule-width、column-rule-style、column-rule-color），設置列之間的邊框樣式
column-fill：設置列的高度是否統一
column-span：設置是否橫跨所有列
最佳實踐方式：
/*超小屏幕（手機，小于768px)*/
/*沒有任何媒體查詢相關的代碼，移動設備優先*/
/*小屏幕（平板，大小等于768）*/
@media (min-width: 768px) {
}
/*中等屏幕（桌面顯示器，大于等于992px)*/
@media (min-width: 992px) {
}
/*大屏幕（大桌面顯示器，大于等于1200px)*/
@media (min-width: 1200px) {
}到此，相信大家對“css3有哪些布局屬性”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
