flex基本了解(伸缩容器中项目)

伸缩容器中的项目

1.order项目的排列顺序 数字越小越靠前 默认是0

2.flex-grow 定义伸缩项目的放大比例,默认为0,即表示如果存在剩余空间,也不放大。前期是如果有剩余空间

3. flex-basis 用来设置伸缩项目的基准值,剩余的空间按比例进行伸缩。语法为 :flex-basis:lenth | auto . 默认值是 auto

4. align-self 用来设置伸缩项目在交叉轴上的对齐方式

  • auto 自动
  • flex-start 以交叉轴的开始位置
  • flex-end 以交叉轴的结束位置
  • center 以交叉轴的中间位置
  • baseline 以交叉轴的基准线
  • stretch (如果交叉轴为垂直方向的话,只有在不设置高度的话,才能看到效果 )(伸缩项目在交叉轴方向占满容器)

你可能感兴趣的:(flex基本了解(伸缩容器中项目))