如何创建弹性盒子？

如何创建弹性盒子？

啥？啥时弹性盒子？解释解释！
ok解释来了：弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
堵油俺的斯丹的？ 不懂？那咱么直接上手
第一步：在弹性盒子（父级盒子）里添加 display：flex；样式

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
}

第二步：在弹性盒子（父级盒子）里添加 flex-direction： （决定盒子元素排列的方向）
值：row 行（从左到右）、column 列（从上到下）、 row-reverse 行（从右到左）、column-reverse 列（从左到右）
注：该样式决定弹性元素的主轴和交叉轴

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    flex-direction: row;
}

flex-direction: row;：主轴是横轴，交叉轴是纵轴；flex-direction: column; ：主轴是纵轴，交叉轴是横轴。
第三步：在弹性盒子（父级盒子）里添加flex-wrap：（规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向）
值：wrap （拆行）、nowrap（默认，不拆行）、wrap-reverse （拆行，但是新行顺序是相反的）

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

此外，第二步和第三步的两个样式可以组合写法：flex-flow：flex-direction flex-wrap；

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
}

注意：
1.放在容器盒子中的元素即为弹性元素。
2.不能使用float（浮动）与clear（清楚浮动）两个规则。
3.弹性元素均为块元素。
4.绝对定位的弹性元素不参与弹性布局。

创建弹性盒子完成了，那么接下来就有个问题了，弹性盒子空余空间如何利用呢，弹性元素的横纵排列又该如何呢？以下我们要添加几个样式。
一、justify-content 设置或检索弹性盒子元素在主轴方向上的对齐方式（所有元素的主轴排列）
值：flex-start 元素紧靠主轴起点

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.father div:nth-child(1) {
    width: 30px;
    height: 30px;
    background-color: rebeccapurple;
}
.father div:nth-child(2) {
    width: 30px;
    height: 30px;
    background-color: skyblue;
}
.father div:nth-child(3) {
    width: 30px;
    height: 30px;
    background-color: teal;
}

页面显示：

flex-end 元素紧靠主轴终点

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

页面显示：

center 元素紧靠主轴中间

.father {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

页面显示：

space-between 第一个元素紧靠起点，最后一个元素紧靠重点，其他空间均分

.father {
    width: 200px;
    height: 200px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

页面显示：

space-around 每个元素两侧的间距相等

.father {
    width: 200px;
    height: 200px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

页面显示：

space-evenly 每个元素间距平均分配

.father {
    width: 200px;
    height: 200px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

页面显示：
二、align- 设置或检索弹性盒子元素在交叉轴方向上的对齐方式
1.align-items （所有元素）
值：align-start 元素紧靠交叉轴起点

.father {
    width: 50px;
    height: 200px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;   
}

页面显示：

align-end 元素紧靠交叉轴终点

.father {
    width: 50px;
    height: 200px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;   
}

页面显示：

center 元素紧靠交叉轴中间

.father {
    width: 50px;
    height: 200px;
    background-color: pink;
    display: flex;
    flex-flow: row wrap;
    align-items: center;   
}

页面代码：

2.align-content （每行）
值：flex-start、flex-end、center、space-between、space-around、space-evenly。
3.align-self （每个元素）
值：flex-start、flex-end、center。

三、flex-grow 用于设置或检索弹性盒子的扩展比率 （将弹性盒子的可用空间分配给弹性元素）。
值：可以填整数或小数。
1.将可用空间分成若干份—若干份是依据flex-grow后面填写数字的总和
2.每个填写样式元素根据原始宽度+所占比例得出新的高度

四、flex-shrink （与flex-grow相反）默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

困了困了，睡了睡了
记得练完在睡！overover！