<style>
.box{
display:flex;
}
</style>
<div class="box">
<div class="box-child1">
<div class="no"></div>
</div>
<div class="box-child2"></div>
</div>
弹性容器：.box就是弹性容器
弹性子元素：.box-child1以及.box-child2都是弹性子元素，但是.no不是弹性子元素
一.弹性容器常用到的属性
1.flex-direction: 主轴设置，决定子元素是横向排列还是竖向排列
flex-direction: row；
/* 从左向右排列 */
flex-direction: row-reverse;
/*从右向左排列*/
flex-direction: column;
/*从上到下排列*/
flex-direction: column-reverse;
/*从下到上排列*/
2. flex-wrap属性
.parent {
width: 240px;
height: 100px;
background-color: #ccc;
display: flex;
flex-wrap: nowrap;
/*
如果设置nowrap，那么子元素会挤在一行，平分宽度
*/
}
.child{
width:80px;
height:40px;
}
flex-wrap:wrap;
/*换行*/
flex-wrap:wrap-reverse;
/*换行，但是顺序相反*/
4. align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-items:center;
align-items:flex-start;
align-items:flex-end;
align-items:stretch;
/*如果子元素没有设置高度，则会拉伸占满整个容器高度*/
5. justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
justify-content ：flex-start; 向左靠拢
justify-content ：flex-end; 向右靠拢
justify-content ：center; 向中间靠拢，但是各子元素之间没有间隔
justify-content ：space-around; 平分内容，两边有间距，两边的间距是中间的一半
justify-content ：space-between; 平分内容，两边没有间距
justify-content ：space-evnely; 两边有间距，两边的间距和中间的间距一样
二，弹性子元素的属性
1. order属性
用整数值来定义排列顺序，数值小的排在前面。
2. flex属性
flex 属性用于设置弹性盒模型对象的子元素分配空间
3. align-self属性
设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
