夜灵的Html笔记Day11——弹性盒子布局

3、弹性布局
1、什么是弹性布局
弹性布局(Flexible box)，简称为 ：flex布局。指定某元素中的子元素的排列布局方式。
弹性布局容器：简称 "容器"，使用弹性布局属性的元素，其子元素能够按照弹性布局的方式进行排列
弹性布局项目：简称 "项目"，弹性布局容器中的子元素，允许按照弹性布局的方式进行排列


语法：
属性：display
取值：
1、flex
作用：将块级元素设置为弹性布局的容器
2、inline-flex
作用：将行内元素设置为弹性布局的容器
注意：
1、元素设置为flex布局后，子元素的float,cleart,vertical-align,text-align全部失效
2、容器中的项目，允许直接修改尺寸
3、容器中的项目，外边距合并问题被解决
2、容器属性
将属性设置给容器元素，从而实现所有子元素的排列布局方式
1、flex-direction
作用：决定主轴以及项目在主轴上的排列方向
取值：
1、row:主轴为水平方向的轴，起点在左端，默认值
2、row-reverse
主轴为水平方向的轴，起点在右端
3、column(重点)
主轴 更改为 交叉轴，起点在上端
4、column-reverse
主轴 更改为 交叉轴，起点在底端
2、flex-wrap
作用：默认情况下，项目们都在一条线上排列(轴线)，如果 项目们 在一条轴线上排不下时，如何换行
取值：
1、nowrap
默认值，不换行,但是会缩放项目
2、wrap
换行
3、wrap-reverse
换行，第一行在下方
3、flex-flow
作用：flex-direction 和 flex-wrap 的缩写
取值：
row nowrap : 默认值
direction wrap ;
4、justify-content(重点)
作用：指定项目在主轴上的对齐方式
注意：
如果主轴为横轴,则指定横向的排列对齐方式
如果主轴为交叉轴,则指定纵向排列对齐方式
取值：
1、flex-start
在轴的起点对齐
2、flex-end
在轴的终点对齐
3、center
居中对齐
4、space-between(终点)
两端对齐，项目之间的间隔都相等
5、space-around
每个项目两侧的间隔是相等的
5、align-items
作用：定义项目在交叉轴上如何对齐
取值：
1、flex-start
交叉轴的起点对齐
2、flex-end
交叉轴的终点对齐
3、center
交叉轴的中间对齐
4、baseline
基线对齐，以最大的文本第一行的基线为准
5、stretch
默认值，如果项目未设置高度或高度为auto的话， 将占满整个容器的高度
6、align-content
作用：该属性定义项目们有多跟轴线时的对齐方式(仅在项目自动换行时有效)
取值：
1、flex-start
在轴的起点对齐
2、flex-end
在轴的终点对齐
3、center
在轴的中间对齐
4、space-between
与轴的两端对齐，轴线之间的间隔相等
5、space-around
每个轴线两侧的间隔相等
6、stretch
默认值，占满轴线 
3、项目属性
1、order
作用：排序,取值越小，排列越靠前。默认值为 0
取值：整数数字
2、flex-grow(重点)
作用：父元素有剩余空间的条件下,定义项目放大比例,默认为0,即便有剩余空间，也不放大
取值：整数数字
3、flex-shrink
作用：父元素剩余空间不足的情况下，定义了项目如何缩小即缩小比例，默认值为1
取值：整数数字
ex:
如果一个项目的 flex-shrink 设置为0，其它项目设置为 1，如果空间不足时，如何排列？？
flex-shrink 为0的元素 宽度不变，为1的元素会缩小
4、flex-basis
作用：定义项目所占据容器空间的大小(主轴)
取值：
1、auto
项目本身大小
2、具体数值
5、flex
作用：flex-grow flex-shrink flex-basis 的简写方式
取值：
1、auto 
等同于 1 1 auto;
2、none
等同于 0 0 auto;
3、grow[,shrink,basis]
6、align-self
作用：定义 自己 与其他项目不一样的在交叉轴的对齐方式,可以覆盖父元素的 align-items 属性
取值:
1、auto
默认值，继承父元素align-items的值,如果没有父元素的话，则等同于stretch
2、flex-start
3、flex-end
4、center
5、baseline
6、stretch