進一步了解flex布局—來實作這些常見布局吧
flex布局具有便捷、靈活的特點，熟練的運用flex布局能解決大部分布局問題，這裡對一些常用布局場景做一些總結。
web頁面布局(topbar + main + footbar)
示例代碼
要實作的效果如下：
圖1
html代碼：
<div class="container">
<header>header...</header>
<main>内容</main>
<footer>footer...</footer>
</div>
css代碼：
header{
height:100px;
background:#ccc;
}
footer{
height:100px;
background:#ccc;
}
.container{
display:flex;
flex-direction:column;
height:100vh;
}
main{
flex-grow:1;
}
應用的flex屬性
本例中主要應用了以下flex屬性：
- flex-direction:column 使整體布局從上到下排列
- flex-grow:1, 應用于main，使得main自動填充剩餘空間
本例中應用以較少的css代碼實作了傳統的上中下頁面布局，其中的關鍵通過flex-grow的使用避免了當main内容過少時footer部分會被提升到頁面上方的問題(傳統方式上可能需要靠絕對定位來解決了~)
每行的項目數固定并自動換行的清單項
要實作的效果如下：
圖2
html代碼：
示例代碼
css代碼：
ul{
display:flex;
flex-wrap:wrap;
}
li{
list-style:none;
flex:0 0 25%;
background:#ddd;
height:100px;
border:1px solid red;
}
應用的flex屬性
本例中主要應用了以下flex屬性：
- flex:0 0 25%,相當于flex-basis:25%，使得每一個清單項的寬度占外層容器(本例中的ul元素)的25%，是以每行最多能夠排開四個清單項。
- flex-wrap:wrap,使得每行填滿時會自動換行
實作自動劃分多餘空間的清單項
本例的效果和上例中的圖2很相似，隻是每行為3個固定寬度的清單項，并且各清單項之間留有相同寬度的空隙
圖3
傳統方式上實作這種效果，不可避免的要用到負margin，那麼現在來看了用flex實作的方式吧
示例代碼
css代碼：
ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
border:1px solid black;
}
li{
list-style:none;
width:120px;
background:#ddd;
height:100px;
border:1px solid red;
}
應用的flex屬性
本例中主要應用了以下flex屬性：
- justify-content:space-between;使主軸方向的多餘空間平均配置設定在兩兩item之間
平均配置設定空間的栅格布局
各大UI裡栅格布局基本是必備的布局之一，平均配置設定布局又是栅格布局裡最常用的布局，利用flex實作平均配置設定的栅格布局，關鍵之處就是利用它的自動收縮空間。
圖4
示例
html如下：
<div class="row">
<div class="column">column1</div>
<div class="column">colum22</div>
<div class="column">colum322</div>
</div>
css如下：
.row{
display:flex;
flex-wrap:wrap;
border:1px solid black;
}
.column{
list-style:none;
background:#ddd;
flex:1;
height:100px;
border:1px solid red;
}
應用的flex屬性
本例中主要應用了以下flex屬性：
- flex:1 這裡針對item應用了flex:1,相當于flex:1 1 0%,而之是以不管各個column元素内容的寬度為多大，都能均分到相等的空間，正式因為相當于在設定了flex-grow:1使得剩餘空間按相等比例自動配置設定的同時又設定了flex-basis:0%,才使得整個空間都平均配置設定了。
聖杯布局
傳統的聖杯布局需要涉及絕對定位、浮動、負margin等幾大最頭疼屬性，有了flex布局以後發現，原來這麼簡單的配方，也能實作這麼複雜的效果哈~
圖5 聖杯布局
示例代碼
html代碼：
<div class="container">
<main>main</main>
<aside>aside</aside>
<nav>nav</nav>
</div>
css代碼：
.container{
display:flex;
height:100vh;
}
aside{
width:50px;
background:#ccc;
}
main{
flex-grow:1;
background:#def;
}
nav{
width:80px;
background:#ccc;
order:-1;
}
應用的flex屬性
- 對main用flex-grow:1,使得中間主元素空間自動擴充
- 對nav應用order:-1,使得order處于最左側(html中main寫在了最前，以利于優先加載主内容區)
元素水準垂直居中
如何讓一個元素同時水準垂直居中？答案很多樣也很複雜，但是在這麼多樣化得答案中flex絕對是最簡單的一種了~
圖6 水準垂直居中
示例代碼
html代碼：
<div class="container">
<div class="inner">我是中間的内容</div>
</div>
css代碼：
.container{
height:300px;
width:300px;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.inner{
border:1px solid black;
}
應用的flex屬性
- justify-content:center;使item元素水準居中
- align-items:center;使item元素垂直居中
這麼多場景都難不倒flex有木有，果然名不虛傳~( 想更詳細的了解flex相關屬性的話，請戳flex入門—了解這些flex屬性~)
轉載于:https://www.cnblogs.com/hjptopshow/p/9110811.html