进一步了解flex布局—来实现这些常见布局吧
??flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。
web页面布局(topbar + main + footbar)
示例代码
??要实现的效果如下：
图1
??html代码：
<div class="container">
<header>header...</header>
<main>内容</main>
<footer>footer...</footer>
</div>
??css代码：
header{
height:100px;
background:#ccc;
}
footer{
height:100px;
background:#ccc;
}
.container{
display:flex;
flex-direction:column;
height:100vh;
}
main{
flex-grow:1;
}
应用的flex属性
??本例中主要应用了以下flex属性：
- flex-direction:column 使整体布局从上到下排列
- flex-grow:1, 应用于main，使得main自动填充剩余空间
本例中应用以较少的css代码实现了传统的上中下页面布局，其中的关键通过flex-grow的使用避免了当main内容过少时footer部分会被提升到页面上方的问题(传统方式上可能需要靠绝对定位来解决了~)
每行的项目数固定并自动换行的列表项
??要实现的效果如下：
图2
??html代码：
示例代码
??css代码：
ul{
display:flex;
flex-wrap:wrap;
}
li{
list-style:none;
flex:0 0 25%;
background:#ddd;
height:100px;
border:1px solid red;
}
应用的flex属性
??本例中主要应用了以下flex属性：
- flex:0 0 25%,相当于flex-basis:25%，使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%，因此每行最多能够排开四个列表项。
- flex-wrap:wrap,使得每行填满时会自动换行
实现自动划分多余空间的列表项
??本例的效果和上例中的图2很相似，只是每行为3个固定宽度的列表项，并且各列表项之间留有相同宽度的空隙
图3
??传统方式上实现这种效果，不可避免的要用到负margin，那么现在来看了用flex实现的方式吧
示例代码
??css代码：
ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
border:1px solid black;
}
li{
list-style:none;
width:120px;
background:#ddd;
height:100px;
border:1px solid red;
}
应用的flex属性
??本例中主要应用了以下flex属性：
- justify-content:space-between;使主轴方向的多余空间平均分配在两两item之间
平均分配空间的栅格布局
??各大UI里栅格布局基本是必备的布局之一，平均分配布局又是栅格布局里最常用的布局，利用flex实现平均分配的栅格布局，关键之处就是利用它的自动收缩空间。
图4
示例
??html如下：
<div class="row">
<div class="column">column1</div>
<div class="column">colum22</div>
<div class="column">colum322</div>
</div>
??css如下：
.row{
display:flex;
flex-wrap:wrap;
border:1px solid black;
}
.column{
list-style:none;
background:#ddd;
flex:1;
height:100px;
border:1px solid red;
}
应用的flex属性
??本例中主要应用了以下flex属性：
- flex:1 这里针对item应用了flex:1,相当于flex:1 1 0%,而之所以不管各个column元素内容的宽度为多大，都能均分到相等的空间，正式因为相当于在设置了flex-grow:1使得剩余空间按相等比例自动分配的同时又设置了flex-basis:0%,才使得整个空间都平均分配了。
圣杯布局
??传统的圣杯布局需要涉及绝对定位、浮动、负margin等几大最头疼属性，有了flex布局以后发现，原来这么简单的配方，也能实现这么复杂的效果哈~
图5 圣杯布局
示例代码
??html代码：
<div class="container">
<main>main</main>
<aside>aside</aside>
<nav>nav</nav>
</div>
??css代码：
.container{
display:flex;
height:100vh;
}
aside{
width:50px;
background:#ccc;
}
main{
flex-grow:1;
background:#def;
}
nav{
width:80px;
background:#ccc;
order:-1;
}
应用的flex属性
- 对main用flex-grow:1,使得中间主元素空间自动扩充
- 对nav应用order:-1,使得order处于最左侧(html中main写在了最前，以利于优先加载主内容区)
元素水平垂直居中
??如何让一个元素同时水平垂直居中？答案很多样也很复杂，但是在这么多样化得答案中flex绝对是最简单的一种了~
图6 水平垂直居中
示例代码
??html代码：
<div class="container">
<div class="inner">我是中间的内容</div>
</div>
??css代码：
.container{
height:300px;
width:300px;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.inner{
border:1px solid black;
}
应用的flex属性
- justify-content:center;使item元素水平居中
- align-items:center;使item元素垂直居中
??这么多场景都难不倒flex有木有，果然名不虚传~(??想更详细的了解flex相关属性的话，请戳flex入门—了解这些flex属性~)
原文地址：https://www.cnblogs.com/hjptopshow/p/9110811.html