flex布局

flex布局

flex布局主要是通过给父盒子添加display:flex属性，来控制子盒子的排列方式

常见父盒子属性

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

父盒子属性说明

1、flex-direction
决定主轴的方向(即项目的排列方向)

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

注意:主轴和侧轴是会变化的,就看flex direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

2、justify-content
定义了盒子在主轴上的对齐方式

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

注意:使用这个属性之前一-定要确定好主轴是哪个

3、flex-wrap
设置子元素是否换行，默认情况下,都排在一条线上。flex-wrap属性定义 , flex布局中默认是不换行的。

属性值	说明
nowrap	不换行（默认）
wrap	换行

注意：如果不换行会将子元素的宽度自动缩小以满足父元素宽度

4、align-items
设置侧轴上的子元素排列方式(单行)，该属性是控制子项在侧轴(默认是y轴)上的排列方式，在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸(默认)

注意：需要设置水平垂直居中时同时设置justify-content和align-items为center就可以了

5、align-content
设置侧轴上的子元素的排列方式(多行)，设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的

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

6、align-content 和align-items区别

• align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
• align-content 适应于换行(多行)的情况下(单行情况下无效) ,可以设置上对齐、下对齐、 居中、拉伸以及平均分
• 总结就是单行找align-items多行找align-content

常见子盒子属性

• flex //子项占的份数
• align-self //控制子项自己在侧轴的排列方式
• order //定义了子项的排列顺序

1、flex
flex属性定义子项目分配剩余空间,用flex来表示占多少份数。

.item{
	flex: number;  /*默认为 0*/
}

指的是在剩余空间中分配，默认是0，不分配多余空间，如果一个子元素只有他有flex，那么他就会占满剩余的空间，如果子元素都没有设置宽度，每个子元素都设置为flex:1，那么他们就会平均分配铺满父盒子
可以通过flex来进行排版换行，设置了该属性后宽度将会失效，设置flex:20%将会分成5个一行，表示每个子盒子占20%，共100%，换行需要给父盒子设置wrap换行属性

//样式部分
.pa{
		display: flex;
		flex-wrap: wrap;
	}
.pa div{
		line-height: 100px;
		text-align: center;
		flex: 20%;
		background-color: pink;
	}
.pa div:nth-child(2n){
		background-color: yellow;
	}
	
		//结构
		<div class="pa">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
		</div>

也可以不设置flex，给每个子盒子单独设置宽高也可以实现，会从左到右排列

2、align-self
控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不-样的对齐方式,可覆盖align-items属性
默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

3、order
定义子项目的排列先后顺序
数值越小,排列越靠前,默认为0。注意:和z-index不一样。