如果對flex不是很熟悉的同學,可以看一下我的另一篇文章Flex 佈局
1、網格佈局
1.1、基本網格佈局
最簡單的網格佈局,就是平均分佈。 HTML程式碼如下。
<div class="Grid">
<div class="Grid-cell">1/2</div>
<div class="Grid-cell">1/2</div>
</div>
<div class="Grid">
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
</div>
複製程式碼
CSS程式碼如下。
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
background: #eee;
margin: 10px;
}
複製程式碼
這裡最關鍵的就是flex:1
使得各個子元素可以等比伸縮
1.2、百分比佈局
某個網格的寬度為固定的百分比,其餘網格平均分配剩餘的空間。 HTML程式碼如下。
<div class="Grid">
<div class="Grid-cell col2">50%</div>
<div class="Grid-cell">auto</div>
<div class="Grid-cell ">auto</div>
</div>
<div class="Grid">
<div class="Grid-cell">auto</div>
<div class="Grid-cell col2">50%</div>
<div class="Grid-cell clo3">1/3</div>
</div>
複製程式碼
CSS程式碼如下。
.col2 {
flex: 0 0 50%;
}
.col3 {
flex: 0 0 33.3%;
}
複製程式碼
這裡最關鍵的是通過flex
的第三個屬性,也就是flex-basis
來定義元素佔據的空間。
2、聖盃佈局
聖盃佈局(Holy Grail Layout:)指的是一種最常見的網站佈局。頁面從上到下,分成三個部分:頭部(header),軀幹(body),尾部(footer)。其中軀幹又水平分成三欄,從左到右為:導航、主欄、副欄。 HTML程式碼如下。
<div class="container">
<header class="bg">header</header>
<div class="body">
<main class="content bg">content</main>
<nav class="nav bg">nav</nav>
<aside class="ads bg">aside</aside>
</div>
<footer class="bg">footer</footer>
</div>
複製程式碼
CSS程式碼如下。
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
display: flex;
flex: 1;
}
header,
footer {
flex: 0 0 100px;
}
.content {
flex: 1;
}
.ads,
.nav {
flex: 0 0 100px;
}
.nav {
order: -1;
}
.bg {
background: #eee;
margin: 10px;
}
@media (max-width: 768px) {
.body {
flex-direction: column;
flex: 1;
}
.nav,
.ads,
.content {
flex: auto;
}
}
複製程式碼
這裡面需要注意的點有
container
的flex-direction: column
這樣保證了header
,body
,footer
是在垂直軸上排列header
,footer
的高度可以通過flex: 0 0 100px
來控制nav
可以通過order:-1
來調整位置- 通過
@media (max-width: 768px)
來調整小螢幕的頁面結構
3、側邊固定寬度
側邊固定寬度,右邊自適應 html程式碼如下。
<div class="container1">
<div class="aside1 bg">aside</div>
<div class="body1">
<div class="header1 bg">header</div>
<div class="content1 bg">content</div>
<div class="footer1 bg">footer</div>
</div>
</div>
複製程式碼
CSS程式碼如下。
.bg {
background: #eee;
margin: 10px;
}
.container1 {
min-height: 100vh;
display: flex;
}
.aside1 {
/* flex: 0 0 200px; */
flex: 0 0 20%;
}
.body1 {
display: flex;
flex-direction: column;
flex: 1;
}
.content1 {
flex: 1;
}
.header1, .footer1 {
flex: 0 0 10%;
}
複製程式碼
這個和上面的基本差不多就不做解釋了。
4、流式佈局
每行的專案數固定,會自動分行。 html程式碼如下
<div class="container2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
複製程式碼
css程式碼如下
.container2 {
width: 200px;
height: 150px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.item {
box-sizing: border-box;
background: #eee;
flex: 0 0 20%;
height: 40px;
margin: 5px;
}
複製程式碼
這裡主要使用到了flex-flow: row wrap
使得子元素水平排列,並且換行
總結
這是我簡單總結的一些佈局。如有錯誤,歡迎指正。