flex布局

29 阅读1分钟

flex布局:

  • flex容器:设置了flex的父元素flex项目:flex元素的子元素
  • flex布局的基本特征:
  • 1:默认水平方向为主轴,垂直方向为侧轴2:项目默认沿着主轴方向排列
  • 3:设置为flex布局后,浮动,清除浮动, vertical-align都失效
  • 容器属性:(给自己设置,控制子元素)
  • 1: display:设置为弹性盒;
  • flex
  • inline -flex
  • 【注】所有的flex相关属性都必须设置为了flex布局,才能生效
  • 2:flex-direction:设置主轴方向;
  • row 水平主轴
  • rOw-reverse反向水平主轴column垂直主轴
  • column -reverse反向垂直主轴
  • 3: flex-wrap:是否换行;
  • nowrap不换行
  • wrap 换行
  • wrap-reverse反向换行