flex布局

//
感觉很有用的布局~

传统布局的局限性

传统布局基于盒模型，依赖display+position+float属性，对于类似垂直居中的布局就不容易实现

flex布局是什么

意为弹性布局，任何容器都可以指定为flex布局。

//块状元素
div{
	display: flex;
}
//行内元素
span{
	display: inline-flex;
}

要注意的是，设置为flex布局后，子元素的float，clear，vertical-align属性将失效

基本语法

• flex布局的元素叫做容器，容器默认有两根轴：水平的主轴和垂直的交叉轴。
• 子元素叫做项目，项目默认沿主轴排列，项目内水平的空间叫main size，垂直的空间叫cross size

容器的属性

• flex-direction （row | row-reverse | column | column-reverse）
  决定主轴的方向，即项目的排列方向。
• flex-wrap （nowrap | wrap | wrap-reverse）
  定义多个项目在一行放不下的情况该如何换行。（默认在同一行，若放不下则子元素被压缩）
• flex-flow
  是前两个属性的简写
• justify-content
  定义多个项目在主轴上的对齐方式
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。
• align-items （flex-start | flex-end | center | baseline | stretch）
  定义在交叉轴上的对齐方式（都按字面上意思理解。其中的baseline是指按项目中的第一行文字底部水平对齐）
• align-content
  定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

项目属性

• order：定义项目排列顺序。数值越小排列越靠前，默认为0
• flex-grow：定义项目的放大比例，默认为0。类似Android的weight
• flex-shrink：定义项目的缩小比例，默认为1。
• flex-basis：在分配多余空间之前，项目占据的main size，默认为auto，也可以设为固定长度
• flex：是前三个属性的缩写
• align-self：允许单个项目与其他项目有不一样对齐方式