在使用flex是一个流式伸缩布局方式，比如正常下弹性盒子flex实现三栏布局，但有时我们想实现多行或指定一行多少个。也是有方法可以实现的。
先看一个flex实现三栏布局，用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局</title>
</head>
<style type="text/css">
html*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
background-color: #00FFFF;
width: 300px;
height: 100px;
}
.center{
height: 100px;
flex: 1;
background: #f296ff;
}
.right{
height: 100px;
background-color: #6ee28d;
width: 300px;
}
</style>
<body>
<!-- 已知高度，写出三栏布局，左右宽度300px，中间自适应-->
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
效果如图：
flex实现多行多列的多种方式
先看一下效果：
灵活变通：通过百分比和折行来实现，是n列就把百分比变为100/n（%）,如果是3列，那么可以把50%改成33.333%,如果是4列，那么改成25%，依次类推，
下面是2行2列的多种写法实现
1.父容器设置为flex布局，并允许折行
.flex-outer {
display: flex;
flex-wrap: wrap;
}
2.子容器设置样式
.flex-outer article {
background: limegreen;
border: 1px solid #eee;
box-sizing: border-box;
color: #fff;
padding: 15px;
}
3.多种方法给每个子容器设置50%的宽度，实现2行2列
方法(1) ：flex合并属性 flex: 1 0 50%;
/* flex合并属性 */
.flex-outer.flex-attr article {
flex: 1 0 50%;
}
<h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3>
<section class="flex-outer flex-attr">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
方法(2) : 基准属性 flex-basis: 50%;
/* flex-basis */
.flex-outer.flex-basis article {
flex-basis: 50%;
}
<h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3>
<section class="flex-outer flex-basis">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
方法(3): 设置宽度 width: 50%;
/* 设置width */
.flex-outer.width-attr article {
width: 50%;
}
<h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3>
<section class="flex-outer width-attr">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
完整实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex实现两行两列</title>
<style>
.flex-outer {
display: flex;
flex-wrap: wrap;
}
.flex-outer article {
background: limegreen;
border: 1px solid #eee;
box-sizing: border-box;
color: #fff;
padding: 15px;
}
/* flex合并属性 */
.flex-outer.flex-attr article {
flex: 1 0 50%;
}
/* flex-basis */
.flex-outer.flex-basis article {
flex-basis: 50%;
}
/* 设置width */
.flex-outer.width-attr article {
width: 50%;
}
pre {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3>
<section class="flex-outer flex-attr">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
<h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3>
<section class="flex-outer flex-basis">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
<h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3>
<section class="flex-outer width-attr">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
</body>
</html>
