Flex核心属性整理

main axis和cross axis的位置不一定是水平和垂直的，以flex-direction的值即为主轴方向

---

justify-content:主轴对齐方式

• space-between:将多余空间放在中间
  
  
• space-around:将多余空间放在两边，和space-between的区别就是最两边会有空间
  
  
• 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：当产生换行时，行与行之间的空隙的分配方式

---

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