flex布局

flex弹性盒子模型

弹性盒子模型

声明:

display:flex;

属性

容器属性

• flex-flow

  flex-flow = flex-direction flex-wrap
  

• flex-direction

  主轴的方向:row|column|row-reverse|column-reverse
  

  row

  

  图片

  column

  

  图片

  row-reverse

  

  图片

  column-reverse

  

  图片

• flex-wrap

  主轴上的元素排列：nowrap|wrap|wrap-reverse
  
  nowrap 不折行
  wrap 折行
  wrap-reverse 反向折行
  

• justify-content

  主轴上的对齐方式
  

  

  主轴上的对齐方式

• align-items

  交叉轴上的单行对齐
  

• align-content

  交叉轴上的多行对齐
  

元素属性

• order

  元素排序
  

• flex-grow

  放大比例，无多余宽度失效
  

• flex-shrink

  缩小比例，默认为1，无多余宽度失效
  

• flex-basis

  设置元素在主轴上的初始尺寸
  

• flex

  flex = flex-grow + flex-shrink + flex-basis
  

• align-self

  单独为元素设置对齐方式
  

总结

总结

总结

总结

声明

文章内容摘抄自 https://www.cnblogs.com/qcloud1001/p/9848619.html