Flex核心属性整理

时间:2023-03-08 15:51:02

Flex核心属性整理

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


Flex核心属性整理

justify-content:主轴对齐方式

  • space-between:将多余空间放在中间

    Flex核心属性整理
  • space-around:将多余空间放在两边,和space-between的区别就是最两边会有空间

    Flex核心属性整理
  • 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核心属性整理

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-itemsalign-item是指定所有的flex item的在侧轴的对齐方式,而align-self用于指定某一个的在侧轴的对齐方式


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