Flex布局实战（二）：网格 \ 圣杯 \ 输入框 \ 悬挂式 \ 固定底栏 \ 流式布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/83118734

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

---

下面代码可能会比较多，但核心CSS代码已经用 /**/ 的标记标出，直接看核心代码就好。

---

一、网格布局

1、基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间即可（flex:1）

注：flex:1 等价于 flex: 1 1 0%;
flex: 1 1 0%; 等价于 flex-grow:1; flex-shrink:1; flex-basic:0;

<style type="text/css">
.grid{
	display: flex;           /*1*/
}
.grid-cell{
	flex:1;                  /*2*/
	border: 1px solid red;
	height: 30px;
	margin: 10px 15px;
}
.larger-height{
	height: 200px;
}
</style>

<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>
<div class="grid">
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
</div>
<div class="grid">
	<div class="grid-cell larger-height">Woohoo!</div>
	<div class="grid-cell larger-height">dasdasd sdsscdasd asadasd</div>
</div>

2、百分比布局

某个网格的宽度为固定的百分比(如下图的1/2、1/3、1/4)，其余网格平均分配剩余的空间。

<style type="text/css">
.grid{
	display: flex;        /*1*/
}
.grid-cell{
	flex:1;               /*2*/
	border: 1px solid red;
	height: 30px;
	margin: 10px 15px;
	text-align: center;
}
.u-1of2{
	flex:0 0 50%;	       /*3*/
}
.u-1of3{
	flex:0 0 33.3333%;	   /*4*/
}
.u-1of4{
	flex:0 0 25%;	       /*5*/
}
</style>

<div class="grid">
  <div class="grid-cell u-1of2">1/2</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 u-1of3">1/3</div>
</div>
<div class="grid">
  <div class="grid-cell u-1of4">1/4</div>
  <div class="grid-cell">auto</div>
  <div class="grid-cell u-1of3">1/3</div>
</div>

---

二、圣杯布局

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

<style type="text/css">
.box{
	display: flex;           /*1*/
    flex-direction: column;  /*2*/
}
.box-body{
	margin: 10px 0;
	height: 200px;
	display: flex;            /*3*/
}
.box-content{
	flex: 1;                  /*4*/
	margin: 0px 10px;
}
.box-nav,
.box-ads{
	/* (nav,ads)两个边栏的宽度设为12em */
	flex: 0 0 12em;           /*5*/
}
.box-nav{
	/* 导航放到最左边 */
	order: -1;                /*6*/
}

.box header,
.box footer,
.box-content,
.box-nav,
.box-ads{
	border: 1px solid red;
}
</style>

<div class="box">
	<header>header</header>
	<div class="box-body">
		<div class="box-content">content</div>
		<div class="box-nav">nav</div>
		<div class="box-ads">ads</div>
	</div>
	<footer>footer</footer>
</div>

---

三、输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮。

<style type="text/css">
.input {
  display: flex;    /*1*/
}
.input-field {
  flex: 1;          /*2*/
}
.input-item{
	border:1px solid gray;
}
</style>

<div class="input">
  <span class="input-item">icon</span>
  <input class="input-field">
  <button class="input-item">btn</button>
</div>

---

四、悬挂式布局

有时，主栏的左侧或右侧，需要添加一个图片栏。也可以理解成类似于微信聊天的场景：左边或右边为头像，另一边为文字内容。

这里就不举例子了，直接上核心代码，大家实际场景举一反三即可：
（头像在左，内容在右）

<style type="text/css">
.Media {
  display: flex;             /*1*/
  align-items: flex-start;   /*2*/
}
.Media-figure {
  margin-right: 1em;
}
.Media-body {
  flex: 1;                   /*3*/
}
</style>

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

---

五、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

---

为了方便演示，我们就做成这样：

<style type="text/css">
.site{
  display: flex; 				/*1*/
  flex-direction: column; 		/*2*/
  min-height: 30vh;     		/*3*/
  border: 1px solid yellow;
}
.site-content {
  flex: 1;						 /*4*/
}
.site header,
.site main,
.site footer{
	border: 1px solid red;
}
</style>

<div class="site">
	<header>header</header>
  	<main class="site-content">main </main>
  	<footer>footer</footer>
</div>

---

如果我们去掉.site-content {flex:1}呢？
就会变成下面这样，main变矮了。

---

六、流式布局

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

注：实际场景中，由于会给.item加border，所以很容易让item溢出box；所以我们这里采用IE盒模型（ box-sizing: border-box;）来避免该情况发生。

<style type="text/css">
.box {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;               /*2*/
  flex-flow: row wrap;         /*4*/
}
.item {
  box-sizing: border-box;      /*1*/
  background-color: white;
  flex: 0 0 25%;               /*3*/
  height: 50px;
  border: 1px solid red;
}
</style>

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>