共计 2539 个字符，预计需要花费 7 分钟才能阅读完成。
如果对 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 使得子元素水平排列，并且换行
总结
这是我简单总结的一些布局。如有错误，欢迎指正。更多系列文章
