flex的属性详解
<h4>flex的使用详解</h4>
<hr />
<p>6个属性设置在容器上：</p>
<ul>
<li>flex-direction 决定zhu'zhou</li>
<li>flex-wrap 换行不换行</li>
<li>flex-flow flex-direction属性和flex-wrap属性的简写形 式，默认值为row nowrap。</li>
<li>justify-content 定义主轴的对其方式</li>
<li>align-item 项目在交叉轴上如何对其 </li>
<li>align-content 定义了多根轴线的对齐方式</li>
</ul>
<h5>1.1 flex-direction属性</h5>
<p>flex-direction属性决定主轴的方向（即项目的排列方向）</p>
<pre><code>.box{
flex-direction:row | row-reverse | column | column-reverse
}</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/43f7faf0b169a32cb2b6ca4f9a305692?showdoc=.jpg" alt="" /></p>
<ul>
<li>row(默认值)，主轴为水平方向，起点在左端。</li>
<li>row-reverse:主轴为水平方向，起点在右端。</li>
<li>column: 主轴为垂直方向，起点在上沿。</li>
<li>
<p>column-reverse:主轴为垂直方向，起点在下沿。</p>
<h4>1.2 flex-wrap属性</h4>
<p>默认情况下，都排列在一条线上（又称“轴线”）</p>
<pre><code>.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}</code></pre>
</li>
</ul>
<p>它可能取三个值。</p>
<p>（1）nowrap(默认),不换行。</p>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/24fc5e884ee9975d46303a2c8af68198?showdoc=.jpg" alt="" /></p>
<p>（2）wrap：换行，第一行在上方。</p>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/83eded22536e7d5d16656a2284084e38?showdoc=.jpg" alt="" /></p>
<p>（3）wrap-reverse:换行，第一行在下方。</p>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/5a1942cdb580be755c11113569d2cd2e?showdoc=.jpg" alt="" /></p>
<h4>1.3 flex-flow</h4>
<p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为：row nowrap</p>
<pre><code>.box{
flex-flow:<flex-direction> | <flex-wrap>
}</code></pre>
<h4>1.4 justify-content属性</h4>
<p>justify-content属性定义了项目在主轴上的对齐方式。</p>
<pre><code>.box{
justify-content:flex-start | flex-end | center | space-between | space-around
}</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/b9af13da3f502a4f89ac1083ac31aea5?showdoc=.jpg" alt="" /></p>
<p>去5个值</p>
<ul>
<li>flex-start(默认值)：左对齐</li>
<li>flex-end:右对齐</li>
<li>center:居中</li>
<li>space-between:两端对齐，项目之间的间隔都相等</li>
<li>space-around:每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。</li>
</ul>