CSS弹性布局

概述
flex是flexible box的缩写，意为“弹性容器（盒）”或“弹性布局模型”。在弹性布局模型中，弹性容器（盒）的子元素可以在设置的水平或垂直方向上排列和对齐；还可以“弹性伸缩”其尺寸，即既可以增加其尺寸以填满未使用的空间，也可以收缩其尺寸以避免溢出。相比浮动和定位布局，利用弹性布局模型可以更快捷、更灵活地设计网页的布局。
可选值 解释
flex-direction 主轴方向 用于定义flex容器主轴的方向，以确定容器内元素的排列方向
flex-wrap 换行方式 用于定义如果一条轴线排不下这些元素时如何换行
justify-content 主轴对齐 用于定义子元素在弹性容器主轴上的对齐方式
align-items 交叉轴对齐 用于定义flex容器中的元素在交叉轴上的对齐方式
align-content 多轴线对齐 属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
1.主轴方向flex-direction
flex-direction属性用于定义flex容器主轴的方向，以确定容器内元素的排列方向。其语法格式如下：
可选值 解释
row（默认值） 主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上端
column-reverse 主轴为垂直方向，起点在下端

flex-direction:row

1
2
3

flex-direction:row-reverse

1
2
3

flex-direction:column

1
2
3

flex-direction:column-reverse

1
2
3
	
#flex_father1{
	flex-direction: row;
}
#flex_father2{
	flex-direction: row-reverse;
}
#flex_father3{
	flex-direction: column;
}
#flex_father4{
	flex-direction: column-reverse;
}
2.换行方式flex-wrap
flex-direction属性用于定义flex容器主轴的方向，以确定容器内元素的排列方向。其语法格式如下：
可选值 解释
nowrap （默认值） 不换行，各子元素按设置的宽度或高度的比例弹性缩放，显示在父元素中
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方

flex-wrap:nowrap

1
2
3
5
6

flex-wrap:wrap

1
2
3
5
6

flex-wrap:wrap-reverse

1
2
3
5
6
	
#flex_father5{
	flex-wrap: nowrap;
}
#flex_father6{
	flex-wrap: wrap;
}
#flex_father7{
	flex-wrap: wrap-reverse;
}
3.主轴对齐justify-content
justify-content属性用于定义子元素在弹性容器主轴上的对齐方式。其语法格式如下：
可选值 解释
flex-start（默认值） 与主轴的起点对齐
flex-end 与主轴的终点对齐
center 与主轴的中点对齐
space-between 与主轴的两端对齐，每个子元素之间的间隔相等
space-around 与主轴的两端对齐，每个子元素两侧的间隔相等

justify-content:flex-start

1
2
3
5
6

justify-content:flex-end

1
2
3
5
6

justify-content:center

1
2
3
5
6

justify-content:space-between

1
2
3
5
6

justify-content:space-around

1
2
3
5
6
	
.father_common3{
	flex-wrap: wrap;
}
#flex_father10{
	justify-content: flex-start;
}
#flex_father11{
	justify-content: flex-end;
}
#flex_father12{
	justify-content: center;
}
#flex_father13{
	justify-content: space-between;
}
#flex_father14{
	justify-content: space-around;
}
4.交叉轴对齐align-items
flex容器中的轴分为主轴和交叉轴。 其中，主轴是使用flex-direction属性定义的轴；交叉轴是与主轴垂直的轴。例如，若将主轴定义为水平方向，起点在容器左端，则交叉轴为垂直方向，起点在容器上端。 align-items属性用于定义flex容器中的元素在交叉轴上的对齐方式。其语法格式为：
可选值 解释
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
baseline 与元素的第一行文字的基线对齐
stretch （默认值） 如果元素未设置高度或高度设为auto，元素将占满整个容器的高度

flex-start：与交叉轴的起点对齐

1
2
3
5
6

flex-end：与交叉轴的终点对齐

1
2
3
5
6

center：与交叉轴的中点对齐

1
2
3
5
6

baseline：与元素的第一行文字的基线对齐

1
2
3
5
6

stretch：(默认值)如果元素高度为未设置/auto，元素将占满整个容器的高度)

1
2
3
5
6
	
.father_common4{
	flex-direction: row;
	flex-wrap: wrap;
}
#flex_father21{
	align-items: flex-start;
}
#flex_father22{
	align-items: flex-end;
}
#flex_father23{
	align-items: center;
}
#flex_father24{
	align-items: baseline;
}
#flex_father25{
	align-items: stretch;
}
5.多轴线对齐align-content
flex-direction属性用于定义flex容器主轴的方向，以确定容器内元素的排列方向。其语法格式如下：
可选值 解释
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch （默认值） 轴线占满整个交叉轴

flex-start：与交叉轴的起点对齐

1
2
3
5
6

flex-end：与交叉轴的终点对齐

1
2
3
5
6

center：与交叉轴的中点对齐

1
2
3
5
6

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

1
2
3
5
6

space-around：每根轴线两侧的间隔都相等

1
2
3
5
6

stretch(默认值)：轴线占满整个交叉轴

1
2
3
5
6
	
.father_common5{
	flex-direction: row;
	flex-wrap: wrap;
}
#flex_father31{
	align-content: flex-start;
}
#flex_father32{
	align-content: flex-end;
}
#flex_father33{
	align-content: center;
}
#flex_father34{
	align-content: space-between;
}
#flex_father35{
	align-content: space-around;
}
#flex_father36{
	align-content: stretch;
}
6.子元素单独设置
在弹性布局中，除可设置弹性容器的属性外，还可设置容器中各子元素的属性，以控制各子元素的显示效果。这些属性主要包括：
属性 释义
order 定义子元素的排列顺序。属性值为n（非负数，如0，1，2，3……），数值越小，该子元素的排列越靠前，默认为0
flex-grow 定义子元素在弹性容器的剩余空间中所占的相对比例。属性值为n（非负数），默认为0，表示存在剩余空间也不放大。若一个子元素的属性值为2，其他子元素的属性值都为1，则前者占据的剩余空间将比其他子元素的多一倍；以此类推
flex-shrink 定义子元素在弹性容器中的缩小比例。属性值为n（非负数），默认为1，表示如果空间不足，该子元素将缩小。其他属性值及原理同flex-grow属性
flex-basis 定义在分配多余空间之前，子元素所占据的主轴空间。默认值为auto，表示子元素占据的主轴空间是其本来大小；其他属性值可以是具体的长度值或百分比
flex flex属性是flex-grow属性、flex-shrink属性和flex-basis属性的简写形式，默认值为0 1 auto 
	
.father_common5{
	flex-direction: row;
	flex-wrap: wrap;
}
#flex_father31{
	align-content: flex-start;
}
#flex_father32{
	align-content: flex-end;
}
#flex_father33{
	align-content: center;
}
#flex_father34{
	align-content: space-between;
}
#flex_father35{
	align-content: space-around;
}
#flex_father36{
	align-content: stretch;
}