align-content属性:折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式(去掉了中间的间隙)
要设置: flex-wrap: wrap;
- align-content: flex-start; 顶端没有行间距
- align-content: flex-end; 底对齐没有行间距
- align-content: center; 居中没有行间距
- align-content: space-between; 两端对齐,中间自动分配
- align-content: space-around; 自动分配距离
注意:弹性盒项目为多行时有效
display: flex;
/* 设置后没有间隙 上端 下端*/
align-content: flex-start;
align-content: flex-end;
/* 设置后没有间隙 中间*/
align-content: center;
/* 自动分配距离 */
align-content: space-around;
/* 两端对齐,中间自动分配 */
align-content: space-between;
#### 复合写法
```css
flex-flow:flex-direction flex-wrap;
例:
flex-flow:cloumn wrap;
```
### 1.5 项目属性——写在弹性子元素上
- align-self属性:调整自身在侧轴的对齐方式,弹性容器中被选中子项的对齐方式(设置在子元素中)
此属性和弹性容器的 align-items 属性作用相同
* align-self: stretch; 如果弹性子元素没有高度或高度为auto,将占满整个容器的高度
* align-self: flex-start;(侧轴)交叉轴起点对齐
* align-self: flex-end; (侧轴)交叉轴终点对齐
* align-self: center; (侧轴)交叉轴中点对齐
order属性;子元素的排列次序
- 属性值为数值,没有单位,默认数值为0,数值越小,排列越靠前
- 必须为整数,不能为小数,可以为负数
flex
- 作用:用于指定弹性子元素如何分配空间。
flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
- flex-grow属性:子元素的放大比例(子项宽度和<父盒子宽度的时候)
- 属性值为数值,没有单位,默认值为0,表示不放大
- 负值对该属性无效
- 可以为小数
- 注意:当容器有剩余空间时有效
- flex-shrink属性:子元素的缩小比例(子项宽度和>父盒子宽度的时候)
- 属性值为数值,没有单位
- 默认值为1,表示当空间不足时,等比例缩小
- 属性值为0,表示当空间不足时,不缩小
- 负值对该属性无效
- 可以为小数
每个元素的宽
(当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度
```