开关
<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>; 定义盒子的弹性空间 具体的数字占比 百分比
