关于伸缩盒（弹性盒）

1.flex布局

开启弹性盒布局display:flex 容器自动成为弹性容器

弹性元素沿着主轴方向进行排列默认方向为水平方向

主轴：弹性元素始终沿着主轴方向排列，默认是水平轴，可以更改

交叉轴：默认垂直方向为交叉轴

2.弹性容器属性

1.flex-direction

设置主轴排列方向水平或垂直

row 默认主轴方向为水平方向

column 设置主轴方向为垂直方向

row-reverse 将水平方向的主轴方向进行反转，将起点和终点进行交换

column-reverse 将垂直方向的主轴方向进行反转，将起点和终点进行交换

2.flex-wrap

设置弹性元素是否换行显示，默认不换行（nowrap）

当父容器的宽度不足以放下所有弹性元素时不会换行显示会进行等比例压缩

wrap换行

wrap-reverse 换行反转

3.flex-flow

是flex-direction和flex-wrap的简写

flex-flow: column nowrap;//表示垂直排列不换行

4.justify-content

更改主轴的对齐方式

flex-start 从行首开始排列每行第一个弹性元素与行首对齐同时所有后续的弹性元素与前一个对齐。

flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

center 主轴中间对齐

space-around 中间两个弹性元素空间是左右弹性元素空间的两倍

space-evenly 空间均匀分配弹性元素左右两侧空间相等

space-between 最左侧最右侧的弹性元素紧贴父容器

stretch 拉伸平铺对齐默认会占满父容器高度给弹性元素设置height streth失效

5.align-items

更改交叉轴对齐方式

flex-start 上对齐

flex-end 下对齐

center 居中对齐

stretch平铺拉伸

baseline 基线对齐弹性元素文字对齐

7.align-content

更改多行弹性元素对齐方式

stretch 平铺拉伸沾满父容器的高度前提是取消高度

flex-start 多行起点对齐

flex-end 多行弹性元素居中对齐

space-around 中间两个弹性元素空间是左右弹性元素空间的两倍

space-evenly 空间均匀分配弹性元素左右两侧空间相等

space-between 最左侧最右侧的弹性元素紧贴父容器

3.弹性元素属性

1.order

更改弹性元素排列顺序

order 默认order为0

值越大越靠后值越小越靠前

2.flex-grow

当父元素有剩余空间时候是否放大

默认不放大默认值为0

div{
flex-grow:1
}
p{
flex-grow:2
}
/*将父元素剩余空间分为3份 div占1 p占2*/

3.flex-shrink

当父元素宽度不足以放下所有弹性元素是否会等比例压缩

默认等比例压缩默认值1

设置flex-shrink:0; 不进行等比例压缩保持原有宽度

4.flex-basis

给弹性元素设置宽度优先级高于width 默认是auto

5.align-self

表示在自身交叉轴的对齐方式

6.flex

flex属性是flex-grow flex-shrink flex-basis属性缩写

flex 0 1 400px; 表示意思就是不进行放大等比例压缩宽度设置为400px

flex：number；

设置给一个弹性元素：表示将父元素容器剩余宽度设置给弹性元素

设置给多个弹性元素表示就是弹性元素之间的倍数关系

.div{
flex:1;
}
.div2{
flex: 2;
}
/*表示弹性元素2宽度是弹性元素1宽度的2倍*/