flex 速查手册

布满荆棘的人生 2023-06-07 12:04 34阅读 0赞

Flex标准写法:

概述:

总的来说就是12个属性;

关于容器的6个,5个单一属性,分别定义了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一个简写属性, 方向,行

关于容器内元素的6个, 5个单一属性, 分别定义元素的顺序, 伸展, 收缩, 初始尺寸, 对齐, 和一个简写属性 描述元素尺寸

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:middle;"> container :&nbsp;display: flex | inline-flex; </td> 
 <td style="vertical-align:middle;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> &nbsp;flex-direction:&nbsp;row | column | row-reverse | column-reverse </td> 
 <td style="vertical-align:middle;"> 元素在容器内的排列方向 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> flex-wrap:&nbsp;nowrap | wrap | wrap-reverse </td> 
 <td style="vertical-align:middle;"> 元素一行或多行显示 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> flex-flow:&nbsp;&lt;flex-direction&gt; &lt;flex-wrap&gt; &nbsp;&nbsp;&nbsp;default: &lt;row nowrap&gt; </td> 
 <td style="vertical-align:middle;"> 上面两个属性的简写 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> justify-content:&nbsp;flex-start | flex-end | center | space-between | space-around </td> 
 <td style="vertical-align:middle;"> 水平方向上, 元素在容器内的分布 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> align-items:&nbsp;stretch | flex-start | flex-end | center | baseline </td> 
 <td style="vertical-align:middle;"> 垂直方向上,&nbsp;&nbsp;元素在容器内的分布 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> align-content:&nbsp;stretch | flex-start | flex-end | center | space-between | space-around </td> 
 <td style="vertical-align:middle;"> 在容器内, 额外的空白部分的分布 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> Container items : </td> 
 <td style="vertical-align:middle;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> &nbsp;order:&nbsp;&lt;number&gt; 0 </td> 
 <td style="vertical-align:middle;"> 元素在容器内的排列顺序 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> align-self: auto |&nbsp;&nbsp;flex-start | flex-end | center | baseline |&nbsp;stretch&nbsp; </td> 
 <td style="vertical-align:middle;"> 覆盖align-items的值, 定义自身在垂直方向上的分布 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> flex-grow:&nbsp;&lt;number&gt; 0 </td> 
 <td style="vertical-align:middle;"> 元素在容器内所占空间的伸展 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> flex-shrink:&nbsp;&lt;number&gt; 1 </td> 
 <td style="vertical-align:middle;"> 元素在容器内所占空间的收缩 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> flex-basis:&nbsp;&lt;width&gt; auto </td> 
 <td style="vertical-align:middle;"> 初始化时, 元素在容器内的尺寸 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;"> flex:&nbsp;&lt;flex-grow&gt; &lt;flex-shrink&gt; &lt;flex-basis&gt; &nbsp; &nbsp;&lt;0 &nbsp;1 &nbsp;auto&gt; </td> 
 <td style="vertical-align:middle;"> 上面三个属性的简写 </td> 
 </tr> 
 </tbody> 
</table>

* *