弹性盒相关知识点

六、align-self 单个弹性子元素在侧轴上的对齐方式

  align-items:设置弹性子元素在侧轴上的对齐方式 (所有的弹性子元素 ，设置在弹性容器上) align-self:设置单个弹性子元素在侧轴上的对齐方式 ，设置在弹性子元素上 align-self: stretch; 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度 align-self: flex-start;（侧轴）交叉轴起点对齐 align-self: flex-end; （侧轴）交叉轴终点对齐 align-self: center; （侧轴）交叉轴中点对齐

七、换行属性:flex-wrap属性: 默认值 不换行:flex-wrap: nowrap; 换行 第一行在上方:flex-wrap: wrap; 换行 第一行在下方:flex-wrap: wrap-reverse; 注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙​ 若父元素没有设置高度，则父元素高度由内容撑开，换行没有缝隙 。

八、align-content 去除行与行之间的间隙 注意：在设置align-content 去除间隙属性之前， 要设置：flex-wrap: wrap; 换行后才会有间隙 /* 去除间隙 */ align-content: flex-start; 顶端没有行间距 align-content: flex-end; 底对齐没有行间距 align-content: center; 居中没有行间距 /* 间隙分配 */ align-content: space-between; 两端对齐，中间自动分配, 元素位于各行之间留有空白空间 align-content: space-around; 自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间 的间距是两端间距的两倍, align-content: space-evenly;平均对齐，元素位于各行之前、之间、之后都留有空白空间， 行间距自动分配 间距相等

九、flex 剩余空间的分配，可用于分配每个子元素的大小 flex：n;n为数字；剩余空间分配写在弹性子元素身上

十、用flex实现两栏和三栏的自适应 自适应：内容随着盒子大小改变而改变 两栏自适应：1.左列固定宽高度 2.右列实现自适应，设置高度，宽度不设置 3.父盒子设置高度，宽度不设置 三栏自适应：1.左列右列固定宽高 2.中间实现自适应，设置高度，宽度不设置 3.父盒子设置高度，宽度不设置

十一、order 子元素的排列次序属性 order属性写在子元素上，属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前 必须为整数，不能为小数，可以为负数。

十二、flex-shrink 缩小属性，flex-grow放大属性 flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候） - 属性值为数值，没有单位 - 默认值为1，表示当空间不足时，等比例缩小 - 属性值为0，表示当空间不足时，不缩小 - 不能为负值，可以为小数 flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候） - 属性值为数值，没有单位，默认值为0，表示不放大 - 可以为小数，不可以为负值 - 注意：当容器有剩余空间时有效

十三、flex-flow 主轴方向和换行属性复合写法 注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙​ 父元素高度有内容撑开换行没有缝隙 flex-wrap属性:换行属性 复合写法：flex-flow: 主轴方向 换行属性; flex-flow: row wrap;