CSS布局之Flex弹性布局回顾

任何一个容器都可以用flex布局:

.box{
	display:flex;
}

行内元素也可以用flex布局:

.span{
	display:inline-flex;
}

注意:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

设置容器flex布局后,有6中属性可设置容器中的直接子元素

一. flex-direction 设置主轴方向(直接子元素的排列方向)

.box{
	flex-direction:row | row-reverse | column | column-reverse
    // row 默认值,水平方向 左起点→右
	// row-reverse 水平方向 右起点→左
	// column 垂直方向 上起点→下
	// column-reverse 垂直方向 下起点→上
}

二. flex-wrap 直接子元素排列的换行方式

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
  // nowrap 默认值 不换行
  // wrap 换行 第一行在上方
  //wrap-reverse 换行 第一行在下方
}

三. flex-flow 是flex-direction和flex-wrap的缩写

.box{
	flex-flow: row nowrap;//默认值
	// 第一参数: <flex-direction>
	//第二个参数:<flex-wrap>
}

四. justify-content 定义直接子元素在 主轴(水平) 上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  
  //flex-start 默认值 左对齐
  //flex-end 右对齐
  //center 水平居中
  //space-between  两端对齐,子元素之间间隔相等
  //space-around 子元素两边间隔相等???
}

五. align-items 定义直接子元素在 侧轴(垂直) 的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
	
	//flex-start 顶部对齐
	//flex-end 底部对齐
	//center 垂直居中对齐
	//baseline 以容器内第一行为基线对齐
	//stretch (默认值) 如果子元素未设置高度或auto,子元素将拉伸占满容器高度
}

六. align-content 定义了多根轴线的(垂直)对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  
  //flex-start 顶部对齐
  //flex-end 底部对齐
  //center 垂直居中对齐
  //space-between 上下对齐 每行间隔相等
  //space-around 每行上下间隔相等???
  //stretch (默认) 高度占满容器高度(拉伸)
}

flex布局容器内子元素的属性设置

1. order 定义子元素的排列顺序 数值越小 排列越靠前

.item {
  order: 0; //(默认)
}

2.flex-grow 定义子元素的放大比例 默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: 0;//(默认) 
}

注意:如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item{
	flex-shrink:1; //默认
	//值为0时为不缩小 负值对该属性无效。
}

注意:如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4.flex-basis 定义子元素占据主轴空间的大小

.item{
	flex-basis:<length> | auto;
	//默认auto 即子元素原本大小
}

5.flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  //该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
}

PS:建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6.align-self 设置单个子元素的对齐方式(垂直方向),可覆盖align-items的属性.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  //auto (默认值) 继承父元素的align-items属性如没有父元素 则==stretch
  //其他属性跟align-items属性值等同
}