flexbox

flexbox

简介：

弹性布局(flexible box)
.box { display:flex; } //声明为flex布局
.box { display:inline-flex }//行内元素声明为flex
.box { display:flex; display:-webkit-flex; }//safafi
注意：设置了flex布局之后，float/clear/vertical-align无效

图形解析

外面的为容器container,里面的为项目flex item。

容器的属性

• flex-direciton//决定主轴方向
  flex-direction: row | row-reverse | column | column-reverse;

  
  
  
• flex-wrap//决定换行方式
  flex-wrap: nowrap | wrap | wrap-reverse;
  不换行/换行/换行，第一行放在下方
• flex-flow//dircection和wrap的缩写
  默认值为row nowrap

• justify-content//主轴对齐方式
  justify-content: flex-start | flex-end | center | space-between | space-around;```

  
  
  

• align-items//对齐方式
  align-items: flex-start | flex-end | center | baseline | stretch;```

  
  
  

• align-content//多根轴线的对齐方式
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;```

  
  
  

项目属性

• order//数值越大越靠前

  
  
  

• flex-grow://放大倍数

  
  
  
• flex-shrink//定义缩小倍数
• flex-basis://项目长度
• flex前三个的所写，默认为0 1 auto
  auto(1 1 auto)/none(0 0 auto)
• align-self//独立出来的对齐方式
  align-self: auto | flex-start | flex-end | center | baseline | stretch;```