Flex核心属性整理

女爷i 2022-03-16 09:56 281阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]  
**main axis和cross axis的位置不一定是水平和垂直的，以`flex-direction`的值即为主轴方向**

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 1]

### `justify-content`:主轴对齐方式 ###

*  `space-between`:将多余空间放在中间  
    ![在这里插入图片描述][20190227142953291.png]
 *  `space-around`:将多余空间放在两边，和`space-between`的区别就是最两边会有空间  
    ![在这里插入图片描述][20190227142904173.png]
 *  `flex-start`:都靠齐主轴的首部（main start）
 *  `flex-end`:都靠齐主轴的尾部（main end）
 *  `center`:全部紧凑居中

### `align-items`：侧轴对齐方式 ###

*  `stretch`：拉伸至所有flex item中最长的一个的长度（默认值）
 *  `center`：居中，个人理解为全部都对齐至主轴
 *  `flex-start`：全部靠齐侧轴首部（cross start）
 *  `flex-end`：全部靠齐侧轴尾部（cross end）

### `align-content`：当产生换行时，行与行之间的空隙的分配方式 ###

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 2]

## `flex-grow`：所有flex item 排完之后同一行还有空间的时候让指定flex item扩大来填充空白部分，值为整数。 ##

## `flex-shrink`：空间不够时指定Flex item缩放比例，值为整数（一般不用）。 ##

## `flex-basis`：指定flex item的默认大小，单位像素（一般不用）。 ##

## `flex`：上面三个属性的合集。 ##

## `order`：修改指定的flex item在主轴上的顺序，值为整数。 ##

## `align-self`：在各flex item高度不一致且在高度不确定的时候，用于单独指定某个Flex item的对齐方式，关于这个属性我的理解是对应flex container中的`align-items`，`align-item`是指定所有的flex item的在侧轴的对齐方式，而`align-self`用于指定某一个的在侧轴的对齐方式 ##

--------------------

> 这里只记录了我认为核心属性，比较简单的或者不常用的就不具体讲了，想要详细学习可以参考MDN：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex][https_developer.mozilla.org_zh-CN_docs_Web_CSS_flex]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]: /images/20220316/3c22a7833d954947b9092723ae373536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 1]: /images/20220316/67bd8833ca2b4a659a3ad02afa9378a3.png
[20190227142953291.png]: /images/20220316/02dd654cd45d485fb706ab666145dd00.png
[20190227142904173.png]: /images/20220316/6a8284fad19544cbbef5ec31cbba1ddb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70 2]: /images/20220316/bcbf4751283349d8b4ab4575aef5323e.png
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_flex]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex