Flex布局

目录

1.flex-direction:设置一个主轴，则另一个自动成为侧轴。

2.justify-content设置主轴上的子元素排列方式，定义了项目在主轴上的对齐方式。

3.flex-wrap设置子元素是否换行

4.align-items设置侧轴上的子元素排列方式（单行）

5.align-content设置侧轴上子元素的排列方式（多行）

6.align-items和align-content区别

7.flex-flow

8.flex子项   flex份数

9.1 align-self控制子项自己在侧轴上的排列方式。

9.2 order属性定义项目的排列顺序

---

flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局父项常见属性

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

1.flex-direction:设置一个主轴，则另一个自动成为侧轴。

	
		
		
		
	
	
		

			1
			2
			3
		
	

2.justify-content设置主轴上的子元素排列方式，定义了项目在主轴上的对齐方式。

 

	
		
		
		
	
	
		

			1
			2
			3
			4
		
	

 将主轴设置为column则是竖直方向表示。

3.flex-wrap设置子元素是否换行

flex布局中默认的子元素是不换行的，如果装不开，会缩小子元素宽度放到父元素里。

	
		
		
		
	
	
		

			1
			2
			3
			3
			3
		
	

（设置换行前后）

 4.align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项（单行）时使用。

 

	
		
		
		
	
	
		

			1
			2
			3
			
		
	

拉伸，align-items:stretch;                                垂直居中：align-items:center；

 

 5.align-content设置侧轴上子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），单行下没效果。

 代码及注释：

	
		
		
		
	
	
		

			1
			2
			3
			4
			5
			5
		
	

6.align-items和align-content区别

align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
align-content 适应于换行(多行）的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items 多行找align-content

 7.flex-flow

 flex-flow属性是flex-direcction和flex-wrap属性的符合属性。

	
		
		
		
	
	
		

			1
			2
			3
			4
			5
		
		
	

8.flex子项   flex份数

flex属性定义子项目分享剩余空间,用flex表示占多少份数，可以用来实现圣杯布局。

圣杯布局:两边固定宽度,中间自适应的三栏布局,中间栏放在文档流前面,先行渲染，左右两侧固定,中间自适应。

.item{
    flex: ;  /*default 0 */
}

	
		
		
		
	
	
		

			

			

			

		
		

			1
			2
			3
		
	

效果图

9.1 align-self控制子项自己在侧轴上的排列方式。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 

9.2 order属性定义项目的排列顺序

数值越小，排序越靠前，默认为0.

注意：和z-index不一样（index控制的是叠罗汉效果）