容器属性
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b032feff22a086762a119e4c32005166.png)
1 justify-content - main轴-水平布局
1.1 center
flex项目水平居中
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e0cc4e79afad511f174295e5375247a.png)
1.2 flex-end
flex项目靠右对齐
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/863e639f67d41215efd1c6e9cb65083b.png)
1.3 space-between
flex项目两端对齐
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9946649371c45ca4cd6d274e432d7b0f.png)
1.4 space-around
flex项目两端对齐,项目间的距离是两端和容器距离的2倍。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0e44d601213933060c4992d1cbe2304a.png)
1.5 space-evenly
flex项目两端对齐,项目间距和容器两端的距离相等。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b172ba7f3173ba391562ffb16a517664.png)
2 align-items - cross轴-垂直布局
2.1 center
垂直方向居中
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b4e642c26f040b2175c33bf5598f6cc.png)
2.2 flex-end
cross轴底部对齐
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c44f442e0986622fa8ce66f771d43221.png)
2.3 水平、垂直居中
justify-content: center;
align-items: center;
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2d6a328092797f3a4c96805c2ffa3edc.png)
2.4 flex-direction - 项目方向
2.5 row-reverses
flex项目水平方向,反序排列
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b952a594f676c3494f01878f2ef2fdc7.png)
2.6 column
flex项目垂直方向,正序排列
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/967a9bec4707add8e32e529543809bcd.png)
2.7 column-revese
flex项目垂直方向,反序排列
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e0e907ab1ccc5c0f11e018d1fd84bc63.png)
2.8 flex-wrap - 换行、换列
nowrap
默认值。意思是不换行、换列。
当flex项目的总宽度超过容器的宽度,flex项目将按照原有比例强行等分,且不换行。
wrap
换行、换列。当flex项目的总宽度超过容器的宽度,将自然换行、换列。且每一行(列)等分容器。
项目属性
1 order
项目的排列顺序。数值越小,排列越靠前。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ec55649b59fbe781d7a3b63730775365.png)
2 align-self
设置单个flex项目的对齐方式。
2.1 center
居中
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/439b2fe52f6e27c6ed3d3589c83a7699.png)
2.2 flex-end
底端对齐
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2d4e2b1b7e062bafc3eac716038a9dfd.png)
3 flex-grow
默认值为0。用于决定项目在有剩余空间的情况下是否放大。默认不放大。
注意:即使设置了宽度,如果设置了放大,那么宽度失效。
多个flex项目同时放大,如果数值越大,放大的比例也越大。
多个flex项目根据放大比例,重新分配了剩余空间。
4 flex-shrink
不换行、换列的情况下有效。
设置缩小。默认值为1,默认情况下,会等比例缩小,宽度失效。
设为0,表示不缩小。
数值越大,缩小的比例也越大。