靈活變通：通過百分比和折行來實現，是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%;
}
html結構
<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%;
}
html
<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%;
}
html:
<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 lang="en">
<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>