flex布局

flex布局

flex原理

flex意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

采用flex布局的元素，称为flex容器（flex container）,简称 “容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item）,简称 “项目”。

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex父项常见属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式/对齐
• flex-wrap：设置子元素是否换行
• align-items：设置侧轴上的子元素的排列方式（单行）/对齐
• align-content：设置侧轴上的子元素的排列方式（多行）/对齐
• flex-flow：复合属性，相当于同时设置了 flex-direction和 flex-wrap

flex-direction

1.主轴和侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

• 默认主轴的方向是x轴，水平向右
• 默认侧轴的方向是y轴，垂直向下

2.属性值

主轴和侧轴是会变化的，设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

<style type="text/css">
	div{
		display: flex;
		width: 80%;
		height: 300px;
		background-color: pink;
		flex-direction: column-reverse;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

justify-content

是跟着主轴走的，先确定主轴

属性值	说明
flex-start	默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴上居中对齐（如果主轴是x轴则 水平居中）
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间**（重要）**

<style type="text/css">
	div{
		display: flex;
		width: 800px;
		height: 300px;
		background-color: pink;
		justify-content: space-around;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
</div>

flex-wrap

默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面；主轴

属性值	说明
nowrap	默认值
wrap	换行

<style type="text/css">
	div{
		display: flex;
		width: 600px;
		height: 400px;
		background-color: pink;
		flex-wrap: wrap;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
		margin: 10px;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
</div>

align-items

在子项为单项（单行）的时候使用；侧轴

属性值	说明
flex-start	默认值 从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（不给子盒子高度，默认是拉伸的）

<style type="text/css">
	div{
		display: flex;
		width: 800px;
		height: 400px;
		background-color: pink;
		/*align-items: stretch;*/
	}
	div span{
		width: 150px;
		background-color: purple;
		margin: 10px;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

align-content

在子项为多项（多行）的时候使用；侧轴

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布的两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

<style type="text/css">
	div{
		display: flex;
		width: 800px;
		height: 400px;
		background-color: pink;
		flex-wrap: wrap;
		/*align-content: stretch;*/
	}
	div span{
		width: 150px;
		background-color: purple;
		margin: 10px;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>

flex-flow

是 flex-direction 和 flex-wrap 属性的复合属性 flex-flow：row wrap

<style type="text/css">
	div{
		display: flex;
		width: 600px;
		height: 300px;
		background-color: pink;
		flex-flow: column wrap;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
</div>

flex子项常见属性

• flex子项占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

flex属性

定义子项目分配剩余空间，有flex来表示占多少份数

flex：<number>; /*default 0*/ 0-1

<style type="text/css">
	section{
		display: flex;
		width: 60%;
		height: 150px;
		background-color: pink;
	}
	section div:nth-child(1){
		width: 100px;
		height: 150px;
		background-color: red;
	}
	section div:nth-child(2){
		flex: 1;
		background-color: green;
	}
	section div:nth-child(3){
		width: 100px;
		height: 150px;
		background-color: blue;
	}
</style>
<section>
	<div></div>
	<div></div>
	<div></div>
</section>

align-self属性

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

<style type="text/css">
	div{
		display: flex;
		width: 600px;
		height: 300px;
		background-color: pink;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
		margin-right: 5px;
	}
	div span:nth-child(3){
		align-self: flex-end;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

order属性

数值越小，排列越靠前，默认为0；注意：和 z-index 不一样。可以为负数

<style type="text/css">
	div{
		display: flex;
		width: 600px;
		height: 300px;
		background-color: pink;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
		margin-right: 5px;
	}
	div span:nth-child(3){
		order: -1;
	}
</style>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>