flex布局属性说明
<h4>FLEX容器 flex container</h4>
<pre><code class="language-html"><style>
/*声明flex容器*/
.box {
display: flex;
}
</style>
<div class="box"></div></code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th>默认值</th>
<th>可选值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-direction</td>
<td><strong>row</strong></td>
<td>row <br/> row-reverse <br/> column <br/> column-reverse</td>
<td>主轴方向</td>
</tr>
<tr>
<td>flex-wrap</td>
<td><strong>nowrap</strong></td>
<td>nowrap <br/> wrap <br/> wrap-reverse</td>
<td>换行方式</td>
</tr>
<tr>
<td>flex-flow</td>
<td><strong>row nowrap</strong></td>
<td><flex-direction> <flex-wrap></td>
<td>flex-direction、flex-wrap的简写</td>
</tr>
<tr>
<td>justify-content</td>
<td><strong>flex-start</strong></td>
<td>flex-start <br/> flex-end <br/> center <br/> space-between <br/> space-around <br/> space-evenly (<strong>?</strong>)</td>
<td>主轴对齐方式</td>
</tr>
<tr>
<td>align-items</td>
<td><strong>stretch</strong></td>
<td>flex-start <br/> flex-end <br/> center <br/> baseline <br/> stretch</td>
<td>交叉轴对齐方式</td>
</tr>
<tr>
<td>align-content</td>
<td><strong>stretch</strong></td>
<td>flex-start <br/> flex-end <br/> center <br/> space-between <br/> space-around <br/> stretch</td>
<td>多根交叉轴对齐方式</td>
</tr>
</tbody>
</table>
<h4>FLEX项目 flex items</h4>
<pre><code class="language-html"><style>
/*声明flex容器*/
.box {
display: flex;
}
.item {
display: flex;
align-items: flex-start;
justify-content: flex-end;
flex:1;
height:50px;
width:120px;
background-color: bisque;
margin:5px;
}
.x {
/* align-self: flex-end; */
flex:3;
}
</style>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item x"></div>
<div class="item">1, 2, 3</div>
</div></code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th>默认值</th>
<th>可选值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>order</td>
<td><strong>0</strong></td>
<td>整型 支持负数</td>
<td>排列顺序。数值越小排列越靠前</td>
</tr>
<tr>
<td>flex-grow</td>
<td><strong>0</strong></td>
<td>数字，不支持负数</td>
<td>空间剩余放大占比，为0不放大</td>
</tr>
<tr>
<td>flex-shrink</td>
<td><strong>1</strong></td>
<td>数字，不支持负数</td>
<td>空间不足缩小占比，为0不缩小</td>
</tr>
<tr>
<td>flex-basis</td>
<td><strong>auto</strong></td>
<td>长度值 auto</td>
<td>可设置px、rem等长度</td>
</tr>
<tr>
<td>flex</td>
<td><strong>0 1 auto</strong></td>
<td>auto(1 1 auto) <br/> none(0 0 auto) <br/> [ <'flex-grow'> <'flex-shrink'>? <'flex-basis'> ]</td>
<td>flex-grow, flex-shrink 和 flex-basis的简写</td>
</tr>
<tr>
<td>align-self</td>
<td><strong>auto</strong></td>
<td>auto <br/> flex-start <br/> flex-end <br/> center <br/> baseline <br/> stretch</td>
<td>属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch</td>
</tr>
</tbody>
</table>
<p><strong>flex属性值含义</strong>
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的简写。
推荐使用此简写属性，而不是单独写这三个属性。 flex属性优先级高于 width height</p>
<p><strong>flex-grow：</strong>定义项目的的放大比例；</p>
<ul>
<li>默认为<code>0</code>，即 即使存在剩余空间，也不会放大；</li>
<li>所有项目的flex-grow为 1：等分剩余空间（自动放大占位）；</li>
<li>flex-grow为 n 的项目，占据的空间（放大的比例）是flex-grow为1的 n 倍。</li>
</ul>
<p><strong>flex-shrink：</strong>定义项目的缩小比例；</p>
<ul>
<li>默认为<code>1</code>，即 如果空间不足，该项目将缩小；</li>
<li>所有项目的flex-shrink为 1：当空间不足时，缩小的比例相同；</li>
<li>flex-shrink为 0：空间不足时，该项目不会缩小；</li>
<li>flex-shrink为 n 的项目，空间不足时缩小的比例是flex-shrink为1的n倍。</li>
</ul>
<p><strong>flex-basis： </strong>定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器-根据此属性计算主轴是否有多余空间</p>
<ul>
<li>默认值为auto，即 项目原本大小；</li>
<li>设置后项目将占据固定空间。</li>
</ul>
<table>
<thead>
<tr>
<th>flex写法（简写）</th>
<th>flex-grow flex-shrink flex-basis</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>没有设置</td>
<td>0 1 auto</td>
<td>不放大会缩小<strong>(默认值)</strong></td>
</tr>
<tr>
<td>auto</td>
<td>1 1 auto</td>
<td>放大且缩小</td>
</tr>
<tr>
<td>none</td>
<td>0 0 auto</td>
<td>不放大也不缩小</td>
</tr>
<tr>
<td>n</td>
<td>n 1 0%</td>
<td><code>n</code> 为非负数字，如为1，自动放大占满剩余空间，如果有多个，则合计所有n值的总和后按占比分配空间</td>
</tr>
<tr>
<td>n1 n2</td>
<td>n1 n2 0%</td>
<td><code>n1</code>，<code>n2</code> 为非负数字</td>
</tr>
<tr>
<td>L</td>
<td>1 1 L</td>
<td><code>L</code> 为一个长度值（px rem等）或百分比</td>
</tr>
<tr>
<td>n L</td>
<td>n 1 L</td>
<td><code>n</code> 为非负数字，L为一个长度值（px rem等）或百分比</td>
</tr>
</tbody>
</table>