css3弹性盒子模型（Flex）

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式.，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

主轴：表示水平方向
侧轴（交叉轴、副轴）：表示垂直方向
弹性盒子（项目）：表示要操作的元素

设置弹性盒子
将父元素设置成弹性盒子容器
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
子元素默认为主轴方向显排列

两种方式
 display:flex;
  让块级元素并列，成为块级元素
  父元素本身的显示方式类似于display:block;
 display:inline-flex;
  让块级元素并列，成为行内块级元素
  父元素本身的显示方式类似于display:inline-block;
例1：

display:flex

css样式代码:

.box{
	/* 为了体现出设置弹性盒子的两种方式 ，不设置宽高*/
	/* width: 1000px;
	height: 400px; */
	border: 1px solid #000;
	
	display: flex;         /*父元素本身的显示方式类似于display:block;*/
}
/* 匹配div并带有id属性 属性值是以child开头的元素 */
div[id^="child"]{
	width: 200px;
	height: 200px;
}
#child1{
	background-color: #f00;
}
#child2{
	background-color: #0f0;
}
#child3{
	background-color: #00f;
}
#child4{
	background-color: #f0f;
}

html代码：

<div class="box">
	<div id="child1">child1</div>
	<div id="child2">child2</div>
	<div id="child3">child3</div>
	<div id="child4">child4</div>
</div>

运行结果：

可见使用display:flex将父元素设置为弹性盒子容器会将父盒子以块级元素进行显示，子元素以水平方式排列（主轴）

例2：

display:inline-flex

css样式代码:

.box{
	/* 为了体现出设置弹性盒子的两种方式 ，不设置宽高*/
	/* width: 1000px;
	height: 400px; */
	border: 1px solid #000;
	
	display: inline-flex;   /*父元素本身的显示方式类似于display:inline-block*/
}
/* 匹配div并带有id属性 属性值是以child开头的元素 */
div[id^="child"]{
	width: 200px;
	height: 200px;
}
#child1{
	background-color: #f00;
}
#child2{
	background-color: #0f0;
}
#child3{
	background-color: #00f;
}
#child4{
	background-color: #f0f;
}

html代码：

<div class="box">
	<div id="child1">child1</div>
	<div id="child2">child2</div>
	<div id="child3">child3</div>
	<div id="child4">child4</div>
</div>

使用display: inline-flex;将父元素设置为弹性盒子容器会将父盒子以行内块级元素进行显示，子元素以水平方式排列（主轴）

容器的属性

设置主轴方向(flex-direction)

操作子盒子的排列方向
如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用

格式：
flex-direction: row|row-reverse|column|column-reverse;

值	          作用
row	默认值，水平方向排列（主轴）
row-reverse	水平方向主轴反转
column	垂直方向排列（侧轴）
column-reverse	垂直方向侧轴反转

设置主轴方向上对齐方式（justify-content）

设置子元素在主轴方向上的 对齐方式

格式：
justify-content:flex-start|flex-end|space-between|space-around;

值	                  作用
flex-start	设置子元素在主轴上起点对齐（默认值）
flex-end	设置子元素在主轴上终点对齐
space-between	把剩余的父元素空间填充到子元素之间
space-around	把剩余的空间平均分布到每个子元素左右两侧

设置副轴方向上的对齐方式（align-items）

设置子元素副轴方向上的 对齐方式
这种方式涉及到基线对齐问题

什么是基线？

值	                  作用
stretch	  默认值，拉伸子元素，填充父元素的高度 （当子项目设定高度时，默认的stretch    效果和flex-start是一致的）
flex-start	副轴起点对齐
flex-end	副轴终点对齐
center	副轴居中对齐
baseline	副轴基线对齐

设置元素在主轴的换行方式（flex-wrap）

默认情况下，项目都排在一条线（又称"轴线"）上，flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

格式：
flex-wrap:nowrap|wrap|wrap-reverse;

值	               作用
nowrap	默认值，不换行 （子元素会自动缩小，以适应父元素的大小。如果还是不够，则溢出）
wrap	当父元素空间不足时，子元素会自动向下换行
wrap-reverse	当父元素空间不足时，子元素会自动向上换行

》扩展
	flex-flow属性（flex-direction属性和flex-wrap属性的简写）
	格式：
	.box {
	  	flex-flow: <flex-direction> || <flex-wrap>;
	}

多条轴线对齐方式（align-center

）
align-center 该属性作用于在多条轴线时的对齐方式，如果只有一条该属性无效

格式：
align-center:stretch|flex-start|flex-end|center|space-between|space-around;

值	           作用
stretch	默认值。元素被拉伸以适应容器
flex-start	元素位于容器的开头（多条轴线处于紧贴状态）
flex-end	元素位于容器的底部（多条轴线处于紧贴状态）
center	元素位于容器的中心（多条轴线处于紧贴状态）
space-between	多条轴线之间都平均留有空白
space-around	各轴之前、之间、之后都平均留有空白

弹性盒子元素属性

order属性（项目的排列顺序）

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

格式
	order: <integer>;		

例：

css代码：

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	.box-father{
		width: 1000px;
		height: 500px;
		border: 1px red solid;
		margin: 50px auto;
		
		/* 设置弹性盒子容器 */
		display: flex;
		
	}
	.box-father div{
		width: 300px;
		height: 200px;
		border: 1px red solid;
		background-color: #6996C4;
	}
	.box-son1{
		order: 1;
		/* 设置子元素的排列顺序 值越大越靠后 */
	}
	.box-son3{
		/* 支持负数 */
		order: -1;
	}
</style>

html代码：

<div class="box-father">
	<div class="box-son1">box-son1</div>
	<div class="box-son2">box-son2</div>
	<div class="box-son3">box-son3</div>
	<div class="box-son4">box-son4</div>
	<div class="box-son5">box-son5</div>
</div>

flex-grow属性（放大项目的比例）

当父元素有多余空间时，给子元素设置flex-grow子元素则会按比例来去分配

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用

格式
flex-grow: number;（默认值为0，不支持负数）

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

flex-shrink属性（缩小项目的比例）

当父元素的宽度小于所有子元素的宽度的总和时（即子元素会超出父元素），不设置则会平均缩小子元素

格式
flex-shrink:number;（默认值为1，不支持负数）

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis（项目占据的主轴空间）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

格式
  flex-basis: <length> | auto; （默认值为auto）
  length：该值可以是像素px，也可以是百分数%，百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）
 （不支持负数）

注意：当flex-basis和width属性同时存在时，width属性不生效，该项目的宽度为flex-basis设置的宽度

通俗易懂的文章：
https://blog.csdn.net/m0_37058714/article/details/80765562
》扩展
flex属性（flex-grow, flex-shrink 和 flex-basis的简写）
格式
flex:flex-geow|flex-shrink|flex-basis;
（默认值为0 1 auto。后两个属性可选）

align-self 属性（不一样的对齐方式）

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

格式
align-self: auto | flex-start | flex-end | center | baseline | stretch;

值	             作用
auto	默认值，跟随父元素的align-items属性，如果没有父元素，则等同于stretch
flex-start	位于副轴的起始位置
flex-end	位于副轴的结束位置
center	位于副轴的中间位置
baseline	根据基线进行对齐
stretch	如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器