好久没有更新博客了,前段时间家里有事,加上刚换了新公司,一直在忙于熟悉业务,没时间更新博客(主要是懒病犯了),新公司最近在忙于小程序推广,时间紧迫加上人员不足,因此也加入了小程序队伍,今天先学习下盒子模型

• 元素设置为dispaly:flex display:inlin-flex称为伸缩容器;
• 伸缩容器内的元素撑为伸缩项目;
• 伸缩容器有俩根轴,默认横向主轴,纵向是交叉轴

伸缩容器的属性

• display
  • 判断是否为伸缩容器: display:flex,display:inlin-flex
  • flex:块级
  • inline-flex:行内级
• flex-deraction
  • 指定主轴方向
  • row 默认 横向
    • 横向 从左到右排
  • row-reverse
    • 横向 从右到左排
  • column 纵向
    • 纵向 从上到下排
  • column-reverse
    • 纵向 从下到上排
• flex-wrap
  • 判断主轴方向空间不够,换行问题
  • nowrap 不换
  • wrap 九宫格排列换
  • wrap-reverse 跟wrap相反
• flex-flow
  • 是flex-deraction和flex-deraction缩写,连写俩个属性
  • flex-wrap:flex-deraction flex-deraction
• justify-content
  • 伸缩项目沿着主轴的对齐方式
  • flex-start 默认值 向起始位置靠齐
  • flex-end 向结束位置靠齐
  • center 向中间靠齐
  • space-between 平均分布,第一个在初始,最后一个在末端
  • space-around 平均分布,俩端留一半空间
• algin-items
  • 伸缩项目在交叉轴(垂直于主轴)上的对齐方式
  • flex-start 默认值 向起始位置靠齐
  • flex-end 向结束位置靠齐
  • center 向中间靠齐
  • baseline 基线对齐 类似垂直y对齐
  • stretch 在交叉轴拉伸充满整个伸缩容器
• align-content
  • 调整伸缩项目出现换行后在交叉轴上的对齐方式,类似伸缩项目在主轴上使用justify-content

伸缩项目的属性

• order
  • 伸缩项目的排列顺序,从小到大,默认为0
• flex-grow
  • 伸缩项目的放大比例,默认是0
  • 存在剩余空间,不为0的会占据空间
• flex-shrink
  • 伸缩项目的收缩能力 默认是1
  • 空间不足,缩小能力
• flex-basic
  • 设置伸缩项目的基准值,剩余空间按比例进行伸缩
• flex
  • 是flex-grow``flex-shrink``flex-basic的缩写
• algin-self
  • 单独伸缩项目在交叉轴(垂直于主轴)上的对齐方式
  • auto 按照自身设置的宽高显示,若无设置,按照stretch计算
  • flex-start伸缩项目向交叉轴的起始位置靠齐
  • flex-end 伸缩项目向交叉轴的结束位置靠齐
  • center 伸缩项目向交叉轴的中间靠齐
  • baseline 伸缩项目向基线对齐,按照前一个伸缩项目的基线最为对齐起点
  • stretch 伸缩项目在交叉轴拉伸充满整个伸缩容器
• align-content
  • 调整伸缩项目出现换行后在交叉轴上的对齐方式,类似伸缩项目在主轴上使用justify-content