如何利用flex布局实现各种布局
2017-08-28 本文已影响0人
xiaoguo16
flex布局是一种很方便的布局，不用自己设置同行的div的高度相等，它们即可高度相等，并且可以方便的实现栅格系统等。下面是几种常见的布局，看flex如何实现：
两列等高布局：
左边固定宽度，右边占据剩余宽度：
<style>
*{
margin: 0;
padding:0;
}
.grid{
display: flex;
border: 1px solid #ccc;
}
.gridCell1{
background-color: #449fdb;
flex-basis: 100px;
}
.gridCell2{
background-color: #3355D0;
flex-basis:calc(100% - 100px);
}
</style>
<body>
<div class="grid">
<div class="gridCell1"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
<div class="gridCell2"><h1>标题</h1></div>
</div>
</body>
实现效果：
Paste_Image.png
可以看到上述代码实现了一个左边固定宽度，右边占据剩余宽度的布局，并且高度相等。
原理：设置父容器为flex，子元素中左边设置flex-basis属性宽度为固定宽度，另外一个子元素的flex-basis属性设置为100%减去这个固定宽度即可。
栅格系统：
在Bootstrap中可以很方便的使用栅格系统引入各个div的宽度划分，如果不使用栅格系统，利用flex也是很容易实现的。
<style>
*{
margin: 0;
padding:0;
}
.grid{
display: flex;
border: 1px solid #ccc;
}
.gridCell1{
background-color: #449fdb;
flex: 1;
}
.gridCell2{
background-color: #3355D0;
flex: 4;
}
.gridCell3{
background-color: #b6d0ba;
flex: 1;
}
.gridCell4{
background-color: #d064b9;
flex: 1;
}
</style>
<body>
<div class="grid">
<div class="gridCell1"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
<div class="gridCell2"><p>文字1</p></div>
<div class="gridCell3"><p>文字2</p></div>
<div class="gridCell4"><p>文字3</p></div>
</div>
</body>
效果图：
Paste_Image.png
如上，flex属性为flex-grow flex-shrink flex-basis的简写属性，当只有一个非负整数时，表示flex-grow的值，另外两个值为 1和0%；flex-grow是项目的放大比例，所以上述四个div的宽度以1：4：1：1的形式呈现。
另一种情况：flex属性为百分比的情况
<style>
*{
margin: 0;
padding:0;
}
.grid{
display: flex;
border: 1px solid #ccc;
}
.gridCell1{
background-color: #449fdb;
flex: 10%;
}
.gridCell2{
background-color: #3355D0;
flex: 40%;
}
.gridCell3{
background-color: #b6d0ba;
flex: 10%;
}
.gridCell4{
background-color: #d064b9;
flex: 40%;
}
</style>
<body>
<div class="grid">
<div class="gridCell1"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
<div class="gridCell2"><p>文字1</p></div>
<div class="gridCell3"><p>文字2</p></div>
<div class="gridCell4"><p>文字3</p></div>
</div>
</body>
效果图：
Paste_Image.png
当flex属性只有一个百分数时，表示的是flex-basis，其他的两个值flex-grow和flex-shrink均为0.
圣杯布局：
Paste_Image.png
<style>
*{
margin: 0;
padding:0;
}
body{
display: flex;
flex-direction: column;
}
.header,.footer{
flex: 1;
background-color: #8591f7;
}
.container{
flex:1;
display: flex;
}
.left{
flex-basis:100px;
background-color: #449fdb;
}
.right{
flex-basis: 100px;
background-color: #3355D0;
}
.main{
flex-basis: calc(100% - 200px);
background-color: #6f7178;
}
</style>
<body>
<div class="header"><h1>标题</h1></div>
<div class="container">
<div class="left"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
<div class="main"><p>文字1</p></div>
<div class="right"><p>文字2</p></div>
</div>
<div class="footer"><p>页脚</p></div>
</body>
该布局需要设置两个flex，一个垂直方向，一个水平方向，垂直方向的容器为body，水平方向的容器为container。垂直方向的三个子元素分别设置flex属性为1，水平方向的三个子元素分别各自设置flex-basis。
