2020-03-10

弹性盒
Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：；采用 Flex 布局的元素的父元素的子元素
概念：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
弹性盒的属性分为两部分：
添加给父元素：
1、display：flex/inline-flex;
flex:块级弹性盒;inline-flex:行内块级弹性盒;
注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
弹性盒只针对第一级子元素生效；
2、flex-direction属性 决定主轴的方向（即项目的排列方向）
默认情况下：主轴的方向是左向右的；
row ： 在左向右的方向（默认值）
row-reverse ： 翻转主轴水平方向的位置： 自右向左
column ： 自上而下的方向 (比较常用)
column-reverse ：翻转垂直方向的位置：自下而上的方向
3、flex-wrap属性，定义子元素是否换行显示
nowrap： 不换行 (默认值)
wrap ： 换行 （常用）
wrap-reverse：翻转wrap显示
复合式写法：
flex-flow属性
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;
4、 justify-content属性 定义了项目在主轴（）上的对齐方式。
flex-start ：(默认值) 沿着主轴的起始点对齐的；
flex-end ：沿着主轴的终点对齐的；
center ： 沿着主轴的居中位置对齐的；
space-between ： 两端对齐，中间自由分配
space-around ：在元素左右自动分配距离
space-evenly; 设置元素之间的空隙相等
5、align-items属性定义侧轴方向是如何
对齐。
flex-start ：沿着侧轴的起始点对齐的；
flex-end ： 沿着侧轴的终点对齐的；
center ： 沿着侧轴的中间位置对齐的；（相对比较常用）
baseline ： 沿着侧轴的基线对齐的
stretch（默认值）：拉伸至同父元素一样高；
6、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。
flex-start 没有行间距 沿顶部对齐
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐，中间自动分配
space-around 自动分配距离
space-evenly ：设置元素之间的空隙相等
stretch 默认值。项目被拉伸以适应容器。 当子元素设置了高度后，在默认位置显示.
说明：align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
添加给子元素：
1、align-self属性
Internet Explorer 和 Safari 浏览器不支持 align-self 属性
说明：
align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。
属性值auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为"stretch"。
Stretch 元素被拉伸以适应容器。
Center元素位于容器的中心。
flex-start元素位于容器的开头。
flex-end 元素位于容器的结尾。
2、order
说明：
number排序优先级，数字越大越往后排，默认为0，支持负数。
默认情况下：按照HTML的书写顺序进行排列的；
3、flex-grow
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
属性值：是一个数字，不用加单位默认值：0； 不扩展;
属性值为1的时候就是扩展；
1、2、3、4、5、6…
flex-grow 会改变元素原有的大小；
注：沿着主轴进行变化；
4、flex-shrink
一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-shrink：1； 默认值 ： 1： 收缩 0：不收缩
5、flex-basis
项目的长度
flex-basis 的权重 大于width；
复合式写法：flex（比较常用）
flex-grow flex-shrink flex-basis
flex：1 2 3 4…说明：
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
详细属性值：
缩写「flex: 1」, 则其计算值为「1 1 0%」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值。