版权声明：哼！坏人！这是我辛辛苦苦码的！ https://blog.csdn.net/DurianPudding/article/details/87879054
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex实例之网格布局</title>
<style>
pre {
font-size: 16px;
}
.grid {
display: flex;
}
.grid-cell {
margin: 20px;
height: 100px;
background-color: antiquewhite;
flex: auto;
}
.grid .u-lof3 {
flex: 0 0 33.3333%;
}
.grid .u-lof4 {
flex: 0 0 25%;
}
</style>
</head>
<body>
<h2>flex实例之网格布局</h2>
<pre>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">flex实例</a></pre>
<h3>1.基本网格布局</h3>
<p>最简单的网格布局就是平均分配，需要设置项目的自动缩放</p>
<pre>
flex属性是
flex-grow （默认0，不放大）
flex-shrink （默认1，缩小）
flex-basis （默认auto，占据主轴空间自动）的简写
该属性有两个快捷键：auto即1(1 1 auto,可放大、缩小、自动),none即0(0 0 auto，不放大、不缩小、自动)
</pre>
<div class="grid"> <!--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>
<h3>2.百分比布局</h3>
<p>某个网格的宽度固定百分比，其余网格平均分配剩余的空间</p>
<div class="grid">
<div class="grid-cell u-lof4">1/4</div>
<div class="grid-cell">auto</div>
<div class="grid-cell u-lof3">1/3</div>
</div>
</body>
</html>