flex布局笔记

flex布局笔记

本笔记由菜鸟教程精简缩略而成,原文链接:Flex 布局语法教程

1.声明:

任何一个容器都可以指定为Flex布局:display:Flex
行内元素也可以使用Flex布局:display:inline-flex

webkit内核的浏览器(safari):display: -webkit-flex
声明flex布局的子项中的float/clear/vertical-align将失效
声明flex布局的子项中图片受align-items的默认值stretch影响,图片易被拉伸,auto属性会失效,最好定义具体的宽高

2.基本概念

采用flex布局的元素,被称为flex容器,子元素自动成为成员,成为flex项目(item)
这里我就偷菜鸟的图啦

容器有2根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis),主轴的开始位置叫做main start(与边框的交叉点),结束位置是main end.

item默认沿着主轴在一条线上展示,不分行,改变主轴的位置方向和item在主轴上的排序的规则是flex布局的核心

3.容器的属性

1. flex-direction: 决定主轴的方向,也就决定item的排列方向

 flex-direction:row;   		/* 默认,排列方向从左往右 */
 flex-direction:row-reverse;/* 排列方向从右往左 */
 flex-direction:column;		/*排列方向从上往下  */
 flex-direction:column-reverse;/* 排列方向从下往上 */

2. flex-wrap: 默认情况下,item都排在一条线上,flex-wrap定义当一条线下如何换行

 flex-wrap:nowrap;   		/* 默认,不换行 */
 flex-wrap:wrap;            /*换行*/
 flex-wrap:wrap-reverse;	/*换行,且换的行在上方  */

3. flex-flow: flex-direction和flex-wrap的合并简写

 flex-flow:row nowrap;
 /*等价于*/
 flex-direction:row;
 flex-wrap:nowrap; 

4. justify-content: 定义了item在主轴上的对齐方式

 justify-content:flex-start;   	/* 默认,左对齐 */
 justify-content:flex-end;		/* 右对齐 */
 justify-content:center;		/*居中*/
 justify-content:space-between; /* 两端对齐*/
 justify-content:space-around;  /*项目间隔相等*/

5. align-items: 定义了item在交叉轴上如何对齐

 align-items:flex-start;   	/* 交叉轴顶点对齐*/
 align-items:flex-end;		/* 交叉轴终点对齐 */
 align-items:center;		/*交叉轴中点对齐*/
 align-items:baseline; 		/* item的第一行文字基线对齐*/
 align-items:stretch;  		/*默认值,占满容器的宽度*/

6. align-content: 定义的多根轴的对齐方式,如果只有一根轴则不起作用

 align-content:flex-start;   	/* 交叉轴顶点对齐*/
 align-content:flex-end;		/* 交叉轴终点对齐 */
 align-content:center;			/*交叉轴中点对齐*/
 align-content:space-between; 	/*两端对齐*/
 align-content:space-around;  	/*项目间隔相等*/
 align-content:stretch;  		/*占满容器的宽度*/

4.item的属性

order: 定义排列顺序,数值越小越靠前,默认为0
flex-grow: 放大比例,默认为0(即如果有空间的情况不放大)
flex-shrink:缩小比例,默认为1,(即如果空间不够时,该项目将缩小最小1倍)
flex-basis:定义了在分配多余空间之前,项目点的主轴,默认auto,类似height/width
flex:上面3项的简写,即默认 0 1 auto
align-self:可覆盖父级的align-items,默认auto,即继承父的属性