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

flex布局

原文：https://www.cnblogs.com/wybing/p/12300017.html