Flex布局

Flex之前

在Flex之前我们用什么布局
主要使用：

• normal flow（正常流，也叫文档流）
• float+clear(浮动和清除浮动)
• plsition relative+absolute(相对定位和绝对定位)
• display inline-block（框的类型里的行内块级元素）
• 负margin(负的外边距)

Flex来了

一种新的布局方式——Flex布局
1.块级布局侧重垂直方向,行内布局侧重水平方向，flex布局是与方向无关的
2.flex布局可以实现空间自动分配，自动对齐（flexible:弹性，灵活）
3.flex适用于简单的线性布局，更复杂的布局要交给grid布局(还没发布)

flex图解

main size（主尺寸）
cross size（侧尺寸）
main start (主尺寸起点)
main end（主尺寸终点）
cross start（侧尺寸起点）
cross end（侧尺寸终点）
flex item（flex项目）
flex container(flex容器)

flex container（flex容器）的六个属性

flex-direction : 方向
值：

• row ：主尺寸水平方向，起点在左端
  例：

  .box{
   background:#ccc;
   display:flex;
   flex-direction:row;
   }
  

起点左

• row-reverse：主尺寸水平方向起点在右端
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-direction:row-reverse;
  }
  

起点右

-column：侧尺寸垂直方向起点在上沿
例：

  .box{
  background:#ccc;
  display:flex;
  flex-direction:column;
  }

起点上

• colunm-reverse：侧尺寸垂直方向起点在下沿
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-direction:column-reverse;
  }
  

起点下

flex-wrap : 换行
值：

• nowrap：默认 不换行（所有元素都在一行）
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:nowrap;
  }
  

不换行

• wrap：元素自动换行
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  }
  

自动换行

• wrap-reverse：元素自动换成逆序的换行
  例：

.box{
background:#ccc;
display:flex;
flex-wrap:wrap-reverse;
}

逆序换行

flex-flow : flex-direction和flex-wrap的简写
值：可取它们的任何值
例：

flex-flow:cloumn wrap;

justify-content : 主尺寸方向对齐方式
值：

• space-between：所有元素空间放在中间
  例：

  .box{
  background:#ccc;
  display:flex;
  justify-content:space-between;
  }
  

空间放中间

• space-around：所有元素空间放在周围
  例：

  .box{
  background:#ccc;
  display:flex;
  justify-content:space-around;
  }
  

空间放周围

• flex-start：所有元素往主尺寸起点靠
  例：

  .box{
  background:#ccc;
  display:flex;
  justify-content:flex-start;
  }
  

起点对齐

• flex-end：所有元素往主尺寸终点靠
  例：

  .box{
  background:#ccc;
  display:flex;
  justify-content:flex-end;
  }
  

终点对齐

• center：所有元素主尺寸居中
  例：

  .box{
  background:#ccc;
  display:flex;
  justify-content:flex-center;
  }
  

居中

align-items : 侧尺寸对齐方式
值：

• stretch：伸展（所有元素一样高）默认对齐
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:stretch;
  }
  

所有元素一样高

• flex-start：所有元素往侧尺寸起点靠
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:flex-start;
  }
  

起点靠

• flex-end：所有元素往侧尺寸终点靠
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:flex-end;
  }
  

终点靠

• center：所有侧尺寸元素居中
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:center;
  }
  

居中

• basline：项目的第一行文字基线对齐
  例：

  .box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:basline;
  }
  

align-content：多行多列内容对齐方式
值：（与justify-content&align-items值一样）
center：居中
flex-end：终点靠
flex-start：起点靠
space-around：空间放在周围
space-between：空间放在中间
stretch：伸展（所有元素一样高）默认对齐

flex item(flex项目)的六个属性

flex-grow：增长比例（内容过多时）
例：

.box{
background:#ccc;
display:flex;
}
.child1{
flex-grow:2;
}
.chlid2{
flex-grow:1
}

增长比例

flex-shrink：收缩比例（空间不够时）
例：

.box{
background:#ccc;
display:flex;
}
.child1{
flex-shrink:0;
}

收缩比例

flex-basis：默认大小
在原来的基础上一层不变

flex：grow&shrink&basis缩写
例：

.box{
background:#ccc;
display:flex;
}
.child1{
flex:1 2 auto;
}

flex

order：顺序(代替双飞翼)
项目的排列顺序。数值越小，排列越靠前，默认为0。
例：

.box{
background:#ccc;
display:flex;
}
.child:nth-child(1){
order:3;
}
.child:nth-child(2){
order:2;
}
.child:nth-child(3){
order:1;
}

顺序

align-self：自身的对齐方式
同值于align-items，允许单个项目有与其他项目不一样的对齐方式，默认值为auto，表示继承父元素的align-items属性.
例：

.box{
background:#ccc;
display:flex;
flex-direction:column;
align-items:center;
}
.child1{
align-self:flex-end;
}

自身的对齐方式