第二十五天：flex 方向
<h4>flex方向</h4>
<hr />
<p><strong> 1. flex-direction </strong></p>
<p>flex-direction: row | row-reverse | column | column-reverse 默认值为 row
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/d3a5d2d564a0cb2696c973520e61464c?showdoc=.jpg" alt="" /></p>
<p><strong> 2. flex-wrap </strong>
flex-wrap: nowrap | wrap | wrap-reverse 默认值 nowrap</p>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/a314288bab2c20213d7ad599824dda2e?showdoc=.jpg" alt="" /></p>
<p><strong> 3. flex-flow </strong>
<strong>flex-flow 为 flex-wrap 与 flex-direction 的简写，建议使用此属性（避免同时使用两个属性来修改）。
flex-flow: <'flex-direction'> || <'flex-wrap'></strong>
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/015aabcfbf1234ec46c26de634759602?showdoc=.jpg" alt="" /></p>
<p><strong> 4. order </strong>
order 的值为相对的（同被设置和未被设置的值相比较），当均为设置时默认值为 0 则按照文档流中的顺序排列。</p>
<pre><code class="language-javascript">order: <integer>
<!-- 默认为 0 --></code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/b37ac2cd01ac8ae20b88db0554fafb08?showdoc=.jpg" alt="" />
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/31ae8924db0ee84e7839a8570528cbb4?showdoc=.jpg" alt="" /></p>
<p><strong>flex 弹性</strong>
<strong>flex-base</strong>
其用于设置 flex-item 的初始宽高（并作为弹性的基础）。如果 flex-direction 是以 row 排列则设置宽，如以 column 排列则设置高。
flex-basis: main-size | <width></p>
<pre><code class="language-javascript">Width/Height = flex-basis + flex-grow/sum(flow-grow) * remain
flex-grow: <number>
initial: 0
<!-- 默认值为 0 --></code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/8dbf78a7107dae9b556efdcd9b2a8491?showdoc=.jpg" alt="" />
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/c5ac166a330ac66c5ad0c6b371b93355?showdoc=.jpg" alt="" />
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/3ca91470a75800cc8fa0adbd03c8e9dc?showdoc=.jpg" alt="" /></p>
<h4>flex-shrink</h4>
<p>收缩因子，用于分配超出的负空间如何从可用空间中进行缩减。</p>
<pre><code class="language-javascript">flex-shrink: <number>
initial: 1
<!-- 默认值为 1 -->
Width/Height = flex-basis + flow-shrink/sum(flow-shrink) * remain
remain 为负值，既超出的区域。</code></pre>
<p><strong>flex 对齐</strong>
<strong>justify-content</strong></p>
<pre><code class="language-javascript">justify-content: flex-start | flex-end | center | space-between | space-around
<!-- 默认值为 flex-start --></code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/195c7288ba684729751f4ec27c304d35?showdoc=.jpg" alt="" /></p>
<p><strong>align-items</strong></p>
<pre><code class="language-javascript">align-items: flex-start | flex-end | center | baseline | stretch
<!-- 默认值为 stretch --></code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/3eaf4dc575d05c437588db60683059ee?showdoc=.jpg" alt="" /></p>
<p><strong>align-self</strong>
align-content
其用于设置 cross-axis 方向上的对其方式</p>
<pre><code class="language-javascript">align-content:flex-start | flex-end | center | space-between | space-around | stretch
<!-- 默认为 stretch --></code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/5fd27619b6a3653dae37358ca95f9f16?showdoc=.jpg" alt="" /></p>
<p>文章转自https://li-xinyang.gitbooks.io/frontend-notebook/content/chapter1/04_06_layout.html#flex-shrink</p>