開關
<h5>屬性的靈活調用開關</h5>
*<input type="button" value="打開" onclick="if(this.value=='打開') this.value='關閉'; else this.value='打開'"/>
aniuse.com 查看元素兼容網
*給自己的子元素div往上排列{父元素控制子元素方式} display: -webkit-box{老版本};display: -webkit-flex{新版本兼容性增強};
*設置給父元素盒子的屬性：控制子元素的顯示方式
//彈性盒模型中 沒調用flex-是沒法使用很多屬性的
flex-direction屬性決定顯示的方向（即項目的排列方向）
flex-wrapflex-wrap屬性定義，如果一行排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
justify-content屬性定義了項目在水平方向的對齊方式。
align-items屬性定義項目在豎直方向上如何對齊。
align-content屬性定義了多行的對齊方式。如果項目只在一行，該屬性不起作用。
- flex-direction： row | row-reverse | column | column-reverse;
row 默認值，左對齊 順序顯示
row-reverse 右對齊 倒序顯示
column 豎直順序顯示
column-reverse 豎直倒序顯示
flex-wrap ：nowrap | wrap | wrap-reverse;
nowrap 默認值 不換行(同單行文本不換行顯示)
wrap 換行顯示
wrap-reverse換行反向顯示
*justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start 默認值 開始位置對齊
flex-end 結束位置對齊
center 居中
space-between 兩端對齊，項目之間的間隔都相等。
space-around 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。(同margin)
（兩側還有對應間隔）
*align-items: flex-start | flex-end | center | baseline | stretch;
flex-start 上端對齊 flex-end 下端對齊
center 居中
baseline 第一行文字的底端基線對齊。 stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start 上端對齊
flex-end 下端對齊
center 居中
space-between 兩端對齊每行之間間隔相等。
space-around 兩端對齊每行項目上下的間距相等，所以兩行項目之間的間距是單個的二倍(同margin)
stretch（默認值）：如果項目未設置高度或設為auto，每行均分盒子的高度。
*設置給子元素項目的屬性：控制子元素本身的顯示方式
order 屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。簡單來說就是按照order大小來覺得div出行順序
#box div:nth-child(1){
flex-grow : 1;
order : 4;
}
#box div:nth-child(2){
order : 2;
}
#box div:nth-child(3){
order : 3;
}
#box div:nth-child(4){
order : 2;
}
flex-grow: <number>; 定義盒子的彈性空間 具體的數字占比 百分比
