css flex布局

￡神魔★判官ぃ 2022-11-21 09:29 291阅读 0赞

1.  容器（container）属性
    
    <table> 
     <thead> 
      <tr> 
       <th>属性</th> 
       <th align="left">说明</th> 
       <th align="left">可能取的值(第一个值为默认值)</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><code>flex-direction</code></td> 
       <td align="left">规定主轴方向</td> 
       <td align="left"><code>row | row-reverse | column | column-reverse</code></td> 
      </tr> 
      <tr> 
       <td><code>flex-wrap</code></td> 
       <td align="left">规定item超过一行时如何换行</td> 
       <td align="left"><code>nowrap | wrap | wrap-reverse</code></td> 
      </tr> 
      <tr> 
       <td><code>flex-flow</code></td> 
       <td align="left"><code>flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;</code></td> 
       <td align="left">默认<code>row nowrap</code></td> 
      </tr> 
      <tr> 
       <td><code>justify-content</code></td> 
       <td align="left">规定item在主轴上如何对齐</td> 
       <td align="left"><code>flex-start | flex-end | center | space-between | space-around</code></td> 
      </tr> 
      <tr> 
       <td><code>align-items</code></td> 
       <td align="left">规定item在交叉轴上如何对齐</td> 
       <td align="left"><code>stretch | baseline | flex-start | flex-end | center</code></td> 
      </tr> 
      <tr> 
       <td><code>align-content</code></td> 
       <td align="left">规定多根交叉轴的对齐方式</td> 
       <td align="left"><code>stretch | flex-start | flex-end | center | space-between | space-around |</code></td> 
      </tr> 
     </tbody> 
    </table>
2.  项目（item）属性
    
    <table> 
     <thead> 
      <tr> 
       <th>属性</th> 
       <th align="left">说明</th> 
       <th align="left">可能取的值(第一个值为默认值)</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><code>order</code></td> 
       <td align="left">定义item在主轴上的排列顺序（越小越靠前）</td> 
       <td align="left"><code>0 | &lt;integer&gt;</code></td> 
      </tr> 
      <tr> 
       <td><code>flex-grow</code></td> 
       <td align="left">定义item的放大比例（与其他设置了该属性的item比较）</td> 
       <td align="left"><code>0(如果存在空间也不放大) | &lt;integer&gt;</code></td> 
      </tr> 
      <tr> 
       <td><code>flex-shrink</code></td> 
       <td align="left">定义item的缩小比例（与其他设置了该属性的item比较）</td> 
       <td align="left"><code>1(如果空间不够item将缩小) | &lt;integer&gt;</code></td> 
      </tr> 
      <tr> 
       <td><code>flex-basis</code></td> 
       <td align="left">放缩前item占据主轴多少空间（根据这个计算剩余多少空间用于放缩）</td> 
       <td align="left"><code>auto(本来大小) | &lt;integer&gt;</code></td> 
      </tr> 
      <tr> 
       <td><code>flex</code></td> 
       <td align="left"><code>flex: none | auto | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ]</code></td> 
       <td align="left"><code>0 1 auto | none(0 0 auto) | auto(1 1 auto) | ...</code></td> 
      </tr> 
      <tr> 
       <td><code>align-self</code></td> 
       <td align="left">为单个项目设置交叉轴的对齐方式，并覆盖父元素的<code>align-items</code></td> 
       <td align="left"><code>auto(继承父元素align-items) | stretch | baseline | flex-start | flex-end | center</code></td> 
      </tr> 
     </tbody> 
    </table>

> [阮一峰Flex][Flex]

[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html