菜鸟3分钟看懂flex布局

快来打我* 2021-09-18 02:50 761阅读 1赞

# [3分钟看懂flex布局][3_flex] #

首先要有个**容器**，并设置display:flex;display:-webkit-flex;该容器有以下六个属性：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>flex-direction (元素排列方向)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>row, row-reverse, column, column-reverse</code> <code>flex-wrap (换行)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>nowrap, wrap, wrap-reverse</code> <code>flex-flow (以上两者的简写)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-direction || flex-wrap</code> <code>justify-content (水平对齐方式)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-start, flex-end, center, space-between, space-around</code> <code>align-items (垂直对齐方式)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>stretch, flex-start, flex-end, center, baseline</code> <code>align-content (多行垂直对齐方式)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>stretch, flex-start, flex-end, center, space-between, space-around</code> </td> 
 </tr> 
 </tbody> 
</table>

**项目**的属性：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>order 排列顺序，数值，默认0</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"integer"</code> <code>flex-grow 如图示7，定义放大比例，默认0，即如果存在剩余空间，也不放大。</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"number"</code> <code>flex-shrink 如图示8，定义缩小比例，默认1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"number"</code> <code>flex-basis 定义项目占据的主轴空间，默认auto。会根据flex-direction定义的主轴（水平或者垂直），定义项目本来的大小，跟width或者height一样。</code> <code>flex 推荐，以上三个的缩写，默认 0 1 auto</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"flex-grow"</code>&nbsp;<code>"flex-shrink"</code>&nbsp;<code>"flex-basis"</code> <code>align-self 如图示9，单个项目有与其他项目不一样的对齐方式，可覆盖align-items</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"auto"</code><code>,</code><code>"flex-start"</code><code>,</code><code>"flex-end"</code><code>,</code><code>"center"</code><code>,</code><code>"baseline"</code><code>,</code><code>"stretch"</code><code>　</code> </td> 
 </tr> 
 </tbody> 
</table>

1.flex-direction

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>row (从左往右)默认</code> <code>row-reverse (从右往左)</code> <code>column (从上往下)</code> <code>column-reverse (从下往上)</code> </td> 
 </tr> 
 </tbody> 
</table>

2.flex-wrap

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>nowrap (不换行)默认</code> <code>wrap (换行，且往下一行换)</code> <code>wrap-reverse (换行，且往上一行换)</code> </td> 
 </tr> 
 </tbody> 
</table>

![545055-20161128171942787-1024154918.png][]

3.flex-flow，是flex-direction和flex-wrap的简写形式。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>flex-flow:&lt;flex-direction&gt; || &lt;flex-wrap&gt;;</code> </td> 
 </tr> 
 </tbody> 
</table>

4.justify-content

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> </td> 
 </tr> 
 </tbody> 
</table>

![545055-20161128175559115-1184130862.png][]

5.align-items

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>stretch 默认</code> <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>baseline 项目第一行文字的基准线对齐</code> </td> 
 </tr> 
 </tbody> 
</table>

![545055-20161128195409474-1301455334.png][]

6.align-content

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>stretch 默认</code> <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code> </td> 
 </tr> 
 </tbody> 
</table>

![545055-20161128202104724-1327042277.png][]

7.flex-grow

定义了放大比例，默认为0，即如果存在剩余空间，也不会放大。但是，如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有的话），如果其中一个为2，则他是其他项目的2倍宽度。

![545055-20161201185759256-1535193905.png][]

8.flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，项目将缩小。如果有一个项目的flex-shrink为0，其他都为1，空间不足时，前者不缩小。

![545055-20161201200613818-1317198942.png][]

9.align-self，定义项目自己的对齐方式

![545055-20161201203017506-1852402762.png][]

[3_flex]: https://www.cnblogs.com/lixuemin/p/6110434.html
[545055-20161128171942787-1024154918.png]: /images/20210726/3499b75ab77f485b815a76daa45c7525.png
[545055-20161128175559115-1184130862.png]: /images/20210726/a0edab9e67a8429d958bd663acf29a32.png
[545055-20161128195409474-1301455334.png]: /images/20210726/fe2d41acbcf046cc95b5d7378165bc1a.png
[545055-20161128202104724-1327042277.png]: /images/20210726/b1018880c52547ee9c789caff43bdc52.png
[545055-20161201185759256-1535193905.png]: /images/20210726/74afa0ecb09c48a4be9de40aadbdb53e.png
[545055-20161201200613818-1317198942.png]: /images/20210726/f5772345e8154751b0f803936dbf0828.png
[545055-20161201203017506-1852402762.png]: /images/20210726/8fd0453e93a64c6eb5b5621ef04ac4b9.png