body {
/*不加display:flex section 独占一行 ，高度为内容的高度
对子元素进行设置
加上 display: flex section 如果不设置高度 则高度和浏览器一样高
如果子标签有宽度 则父标签变小，则子也随着变小，不会换行
*/
display: flex;
height: 900px;
background-color: rgba(255, 252, 249, 0.98);
border: rgba(0, 0, 0, 0.34) 5px solid;
/*容器属性 排布子标签
justify-content写在父标签里
justify-content:水平方向
1、center 水平居中
2、flex-end 水平方向上的最后
3、flex-start 水平方向上的开始
4、space-around 两个项目之间的距离是一样的；项目之间的距离是项目与边的距离的2倍
5、space-between 清除项目与边的距离，并且将剩余的距离平分掉
6、inherit 水平方向上默认flex-start 在左边
*/
justify-content: center;
/*
容器属性 排布子标签
align-items写在父标签里
align-items: 垂直方向
1、center 垂直居中
2、flex-end 垂直方向上的下部
3、flex-start 垂直方向上的上部
4、baseline 第一行内容对其 基线对其 按照内容对其 验证方式将项目之一的padding-top设置值
5、stretch 如果项目没有高度 ，则进行垂直铺满，与浏览器的高度一样
6、inherit 垂直方向上默认stretch 在上部
*/
align-items: stretch;
/*容器属性 排布子标签
flex-direction在父标签里
flex-direction: 方向控制
1、row 水平方向的排版，并且顺序和标签的顺序一样，先左后右
2、column 垂直布局,项目顺序和原本的顺序一样的；和标签里的顺序一样的 子元素上下排版
3、row-reverse 水平方向的排版,项目的顺序与标签的顺序相反的
4、column-reverse 垂直方向，顺序和标签的顺序相反的
*/
flex-direction: row;
/*容器属性 排布子标签
flex-wrap在父标签里
flex-wrap: 换行
1、wrap 换行
2、nowrap 不换行
3、wrap-reverse 换行----逆向换行，如果有新建的项，那么新建的项在上
*/
flex-wrap: wrap;
/*容器属性 排布子标签
flex-flow在父标签里
flex-flow: flex-direction和flex-wrap的集合
1、column-reverse wrap 垂直反向--换行 并且剩余空间平分
*/
flex-flow: column-reverse wrap;
/*容器属性 排布子标签
align-content 前提：必须有多个轴线 设置换行
align-content:
1、center 垂直方向集中
2、flex-start 垂直方向上部
3、flex-end 垂直方向下部
4、space-around 两个项目之间的距离是一样的；项目之间的距离是项目与边的距离的2倍
5、space-between 清除项目与边的距离，并且将剩余的距离平分掉
6、stretch 如果项目没有高度 ，则进行垂直铺满，与浏览器的高度一样
*/
align-content: stretch;
}
弹性布局：对子元素进行有规律的空间分配,一般在父标签里display :flex 父标签称为容器,
子标签称为项目水平方向叫 主轴 mian axis
起始点称为 main start 结束点称为 main end
垂直方向 交叉轴 cross axis 起始点称为 cross start 结束点称为 cross end
项目在主轴方向的大小称为 mian size 在交叉轴的方向的大小称为cross size
在子元素中可以设置的属性如下
section {
/*水平上的所占的空间;当和width同时存在时，width失效。
1、auto 与原来的大小相同
*/
flex-basis: 300px;
width: 200px;
/*order: 项目排版的顺序，值越小，越靠前*/
order: 1;
/*flex-shrink: 项目是否可以缩小，0不能被缩小；默认值1-可以被缩小*/
flex-shrink: 1;
/*flex-grow：将剩余的空间进行分配，原来的宽度与父标签的差值，剩下的按比例将进行分配*/
flex-grow: 1;
/*align-self: 项目自己的对齐方式
1、center 居中
2、auto 遵循父标签
3、flex-end 底部
4、flex-start 上部
5、baseline 基于第一行对齐
6、stretch 不设置时默认是浏览器的高度
*/
align-self: stretch;
/*flex:是 flex-grow flex-shrink flex-basis 的集合*/
flex: 1 1;
flex: 300px;
}
