<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;? ?平分內(nèi)容，兩邊有間距，兩邊的間距是中間的一半
justify-content ：space-between;? 平分內(nèi)容，兩邊沒有間距
justify-content ：space-evnely;? 兩邊有間距，兩邊的間距和中間的間距一樣
二，彈性子元素的屬性
1. order屬性
用整數(shù)值來定義排列順序，數(shù)值小的排在前面。
2. flex屬性
flex 屬性用于設置彈性盒模型對象的子元素分配空間
3. align-self屬性
設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。
