CSS必知|重点属性flex|实践技巧|温故知新

学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

重点属性-display

重点属性-position

重点属性-float

一. flex 解释

1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。

2、块级元素和行内块级元素都可以使用flex布局。

3、Webkit内核的浏览器，需要加上-webkit前缀。

二. flex 容器属性

1、flex-direction

此属性决定主轴的方向

.flex{
	flex-direction: row; // (默认值) 主轴水平方向，从左往右
	flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左
	flex-direction: column; // 主轴为垂直方向，从上往下
	flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上
}

2、flex-wrap 

此属性定义，如果一条轴线上排列不下，换行的方式

.flex{
	flex-wrap: nowrap; // （默认）不换行	
	flex-wrap: wrap; // 正常换行 从上到下	
	flex-wrap: wrap-reverse; // 逆方向换行 从下到上	
}

3、flex-flow

此属性定义，是flex-direction和flex-wrap简写的方式；

.flex {
	flex-flow: <flex-direction>  空格 <flex-wrap>;
}

4、justify-content

此属性定义，项目在主轴上的对齐方式

.flex{
	justify-content: flex-start; // 左对齐（默认）
	justify-content: flex-end;	// 右对齐
	justify-content: center;	// 居中
	justify-content: space-between; // 两端对齐。且项目间间隔相等
	justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍
	justify-content:  space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}

5、align-items

此属性定义，项目在交叉轴上的对齐方式

.flex{
	align-items: flex-start; // 交叉轴的起点对齐
	align-items: flex-end; // 交叉轴的终点对齐
	align-items:center; // 交叉轴的中点对齐
	align-items: baseline; // 项目的第一行文字的基线对齐
	align-items: stretch; // (默认值) 如果项目未设置高度或设为auto ，将充满整父级容器高度
}

6、align-content

此属性定义，多个项目多根轴线的对齐方式，只有一个轴线时没有作用

.flex{
	align-content: flex-start; // 与交叉轴的起点对齐。
	align-content: flex-end：// 与交叉轴的终点对齐。
	align-content: center：// 与交叉轴的中点对齐。
	align-content: space-between：// 与交叉轴两端对齐，轴线之间的间隔平均分布。
	align-content: space-around：// 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
	align-content: stretch; // （默认值）轴线占满整个交叉轴。
}以上的属性都是容器的属性

三. flex 项目 属性

1、order

此属性决定项目的排列顺序，数值越小。排列越靠前。

.box{
	order: number; // 默认为 0 ,要讲哪个项目向前移动 将其order设置为负数。
}

2、flex-grow

此属性决定项目的放大比例。

.box{
	flex-grow: 5; // 默认为 0 
}

3、flex-shrink

此属性决定项目的缩小比例。

.item {
          flex-shrink: number; // 默认为1.要将哪个项目缩小 值设为0 ；
}

4、flex-basis

此属性定义 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5、flex

此属性定义为 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item{
	flex: flex-grow flex-shrink flex-basis; // 简写方式
}

5、align-self

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

.item{
 	align-self: auto; 
 	align-self: flex-start;
 	align-self: flex-end;
 	align-self: center;
 	align-self: baseline;
 	align-self: stretch; 
}

四. 代码实践练习

github 地址：https://github.com/zjycpzjy/cssFlexbox.git

五.flex布局面试题

谈谈对flex布局的认识

        web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局。

        当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。