弹性布局（Flex 布局）属性图解

小咪咪 2022-12-27 02:22 214阅读 0赞

## 1、主轴和交叉轴 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

## 2、容器属性 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

## justify-content ##

![20201207180455325.gif_pic_center][]

## align-items ##

![20201207180531294.gif_pic_center][]

### flex-direction ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]  
![2020120718071561.gif_pic_center][]

## 3、项目属性 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]

### order ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

### flex-grow ###

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。  
![20201207181115708.png_pic_center][]

### flex-shrink ###

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

.item { 
      flex-shrink: <number>; /* default 1 */
    }

![20201207181342892.jpg_pic_center][]

### align-self ###

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item { 
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

![20201207181741268.png_pic_center][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2710cd83e15648fc86f597b9b2783670.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/f874447f9e4f492bb5bc629804ad4057.png
[20201207180455325.gif_pic_center]: /images/20221120/cce9390506124c5fa3bf98c2c80cb3cc.png
[20201207180531294.gif_pic_center]: /images/20221120/95bfe6e959c544e59c1454d20cef7052.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/6cceb85820bd49348b8d3bcd6ef5b695.png
[2020120718071561.gif_pic_center]: /images/20221120/30a24af83d3443a28814268a18e77496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/e1a5b2d2c8ce491ea63238910d0b7fca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/fd681c6904be45b88b4c0d9b2a8c7331.png
[20201207181115708.png_pic_center]: /images/20221120/b5d972f66fe9483189347ca279e4897d.png
[20201207181342892.jpg_pic_center]: /images/20221120/18ebecbdf21345ca8dfbbfdcde1d90ff.png
[20201207181741268.png_pic_center]: /images/20221120/6f7db715e12e4516a306e26ea5627314.png