网络布局

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>

CSS代码：

.Grid {
display: flex:
}

.Grid-cell {
flex: 1;

background: #eee;

margin: 10px;
}

这里最关键的就是flex: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代码：

其中flex是flex-grow(放大倍数)、flex-shrink(缩小倍数)、flex-basis(占据主轴空间比例)

.col2 {
flex: 0 0 50%;
}

.col3 {
flex: 0 0 33.3%
}

这里最关键的是通过flex的第三个属性，也就是flex-basis来定义元素据的空间。

圣杯布局

圣杯布局（Holy Grail Layout：）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码：

<div class="constainer">

<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>

</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:#ee;

margin: 10px;
}

@media (min-width:768px) {
.body {
flex-direction: columin;

flex: 1;
}

.nav,.abs,.content {
flex: auto;
}
}

这里面需要注意的点有

container的flex-direction: column这样保证了header,body,footer是在垂直轴上排列

header,footer的高度可以通过flex: 0 0 100px来控制

nav可以通过order:-1来调整位置

通过@media (max-width: 768px)来调整小屏幕的页面结构

侧边固定宽度

侧边固定宽度，右边自适应

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%;

}

这个和上面的基本差不多就不做解释了。

流式布局

每行的项目数固定，会自动分行。

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;

}