一、基本网格布局
最简单的网格布局，就是平均分布。
clipboard01.png
HTML代码如下：
<div class="box">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
</div>
CSS代码如下：
/* 本文中布局默认都加上 border-box */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: flex;
}
.item {
flex: 1;
}
二、左边固定，右边自适应布局
左边网格的宽度固定，右边网格自适应。
clipboard02.png
CSS代码如下：
.item {
flex: 1;
}
.item:nth-child(1) {
flex: 0 0 50%;
}
三、圣杯布局
圣杯布局指的是一种常见的网站布局。页面从上到下，分成三个部分：头部(header)，躯干(body)，尾部(footer)。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
clipboard03.png
HTML代码如下：
<body class="page">
<header>Header</header>
<section>
<nav>Nav</nav>
<main>Main</main>
<aside>Aside</aside>
</section>
<footer>Footer</footer>
</body>
CSS代码如下：
.page {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header, footer {
flex: 0 0 50px;
}
section {
display: flex;
flex: 1;
}
main {
flex: 1;
}
nav, aside {
flex: 0 0 200px;
}
四、固定的底栏
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
clipboard04.png
HTML代码如下：
<div class="page">
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</div>
CSS代码如下：
.page {
display: flex;
min-height: 100vh;
flex-direction: column;
}
section {
flex: 1;
}
五、流式布局
每行的项目数固定，会自动分行。
clipboard05.png
CSS代码如下：
.parent {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
网友评论