关于伸缩盒（弹性盒）

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倍*/