5.4-flex布局

阮一峰-flex教程

Flexible Box盒模型 “弹性布局” 更加灵活
一维布局方案

.box{
	display:flex;
	}

行内元素也可以使用

.box{
	display:inline-flex;
	}

Flex布局后，子元素float，clear，vertical-align 属性将失效

基本概念

Flex容器的子元素为容器成员，称为flex项目，简称“项目”

容器有水平主轴和垂直的交叉轴。main axis / cross axis
项目默认沿主轴排列，开始的位置是main start
交叉轴开始的位置是：cross start

项目的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. flex-direction 决定主轴方向
   row| row-reverse |
   水平方向 起点左/起点右
   column | column-reverse
   主轴垂直方向 起点上/起点下

2. flex-wrap 定义如何换行
   （1）nowrap 默认:不换行
   （2）wrap:换行，第一行在上方
   （3）wrap-reverse:换行，第一行在下方
   

3. flex-flow direction和wrap的简写形式

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3. justify-content 定义项目在主轴上的对齐方式（项目：所有子元素成员）
   justify：调整使全行排满; 使每行排齐; 使齐行;
   

4. align-items 定义
   align:使成一条直线; 使一致

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5. align-content 定义了多轴线对齐方式
   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（默认值）：轴线占满整个交叉轴。

6. 项目的属性
   flex元素上的属性：
   order：定义排列顺序，越小越靠前
   flex-grow：定义项目放大比例，默认0，有剩余也不放大。（都为1，等分。一个为2，其他为1，前者比后者多占一倍空间）
   flex-shrink：定义缩小比例，默认1，空间不足该项目缩小。如果其他都为1，空间不足都缩小。如果一个为0，其他为1,0不缩小。（负值无效）
   flex-basis：定义在分配多余空间时，项目占据的空间。默认为auto，项目本身大小
   flex：flex-grow, flex-shrink, flex-basis 的简写，默认 0 1 auto。？？？？
   快捷值：auto (1 1 auto) 和 none (0 0 auto)
   后面两个属性可选（优先使用，浏览器会推算相关值）
   align-self：允许单个项目，对齐方式不同，可覆盖align-items属性。默认auto，继承父元素的啊lign-items属性。
   没有父，等同于stretch。
   可取6个值，除auto，其他和align-items 完全一致。