弹性盒的属性了解和媒体查询

*{margin: 0;padding: 0;font-size: 18px}
        h1{margin: 20px 0 0 0;font-weight:100;clear: both;font-size: 24px}
        span{float: left;padding:0 10px;width: 250px}
        input{display: block}
        section{height: 50px;width: 50px;border: 1px solid #333;line-height: 50px;text-align: center}
        #display{border: 1px solid #222;display: flex;padding: 5px;}
        #flex-direction{border: 1px solid #222;padding: 5px;display: flex;flex-direction: row}
        #flex-wrap{border: 1px solid #222;padding: 5px;display: flex;flex-wrap:nowrap}
        #justify-content{height: 100px;;border: 1px solid #222;padding: 5px;display: flex;justify-content: flex-start}

<h1>display</h1>
    <span>
　　　　flex<input type="radio" name="display"  />
　　　　inline-flex<input type="radio" name="display" />
　　</span>  
    <div id="display">
　　　　<section>1</section>
　　　　<section>2</section>
　　　　<section>3</section>
　　　　<section>4</section>
　　</div>
    
    <h1>flex-direction</h1>
    <span>
　　　　row<input type="radio" name="flex-direction"  />
　　　　row-reverse<input type="radio" name="flex-direction"/>
　　　　column<input type="radio" name="flex-direction"/>
　　　　column-reverse<input type="radio" name="flex-direction"/>
　　</span>  
    <div id="flex-direction">
　　　　<section>1</section>
　　　　<section>2</section>
　　　　<section>3</section>
　　　　<section>4</section>
　　</div>

    <h1>flex-wrap(设置伸缩子元素在缩小窗口时是否换行)</h1>
    <span>
　　　　nowrap<input type="radio" name="flex-wrap"  />
　　　　wrap<input type="radio" name="flex-wrap"/>
　　　　wrap-reverse<input type="radio" name="flex-wrap"/>
　　</span>  
    <div id="flex-wrap">
　　　　<section>1</section>
　　　　<section>2</section>
　　　　<section>3</section>
　　　　<section>4</section>
　　　　<section>5</section>
　　　　<section>6</section>
　　　　<section>7</section>
　　　　<section>8</section>
　　</div>

    <h1>justify-content</h1>
    <span>
　　　　　　flex-start<input type="radio" name="justify-content"  />
　　　　　　flex-end<input type="radio" name="justify-content"/>
　　　　　　center<input type="radio" name="justify-content"/>
　　　　　　space-between<input type="radio" name="justify-content"/>
　　　　　　space-around<input type="radio" name="justify-content"/>
　　</span>  
    <div id="justify-content">
　　　　　　<section>1</section>
　　　　　　<section>2</section>
　　　　　　<section>3</section>
　　　　　　<section>4</section>
　　</div>

var btnFlex = document.getElementsByTagName("input");
var oDiv = document.getElementsByTagName("div");
/* display */
btnFlex[0].onclick = function (){
    if(this.checked){
        oDiv[0].style.display = "flex"; }}
btnFlex[1].onclick = function (){
    if(this.checked){
        oDiv[0].style.display = "inline-flex";}}
/* flex-direction */
btnFlex[2].onclick = function (){
    if(this.checked){
        oDiv[1].style.cssText = "flex-direction: row";}}
btnFlex[3].onclick = function (){
    if(this.checked){
        oDiv[1].style.cssText = "flex-direction: row-reverse";}}
btnFlex[4].onclick = function (){
    if(btnFlex[4].checked){
        oDiv[1].style.cssText = "flex-direction: column";}}
btnFlex[5].onclick = function (){
    if(this.checked){
        oDiv[1].style.cssText = "flex-direction: column-reverse";}}
/* flex-wrap */
btnFlex[6].onclick = function (){
    if(this.checked){
        oDiv[2].style.cssText = "flex-wrap: nowrap";}}
btnFlex[7].onclick = function (){
    if(this.checked){
        oDiv[2].style.cssText = "flex-wrap: wrap";}}
btnFlex[8].onclick = function (){
    if(this.checked){
        oDiv[2].style.cssText = "flex-wrap: wrap-reverse";}}
/* justify-content */
btnFlex[9].onclick = function (){
    if(this.checked){
        oDiv[3].style.cssText = "justify-content: flex-start";}}
btnFlex[10].onclick = function (){
    if(this.checked){
        oDiv[3].style.cssText = "justify-content: flex-end";}}
btnFlex[11].onclick = function (){
    if(this.checked){
        oDiv[3].style.cssText = "justify-content: center";}}
btnFlex[12].onclick = function (){
    if(this.checked){
        oDiv[3].style.cssText = "justify-content: space-between";}}      
btnFlex[13].onclick = function (){
    if(this.checked){
        oDiv[3].style.cssText = "justify-content: space-around";}}   

.flex-start{height: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-start}
            .flex-end{height: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-end}
            .center{height: 100px;display: flex;padding: 5px;border: 1px solid #333;align-items:center}
            .baseline{height: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:baseline}
            .stretch{height: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:stretch}
            #align-items p{width: 50px;border: 1px solid #333}

<h1>align-items侧轴</h1>
    <span>
　　　　　stretch<input type="radio" name="align-items"/>
        flex-start<input type="radio" name="align-items"  />
        flex-end<input type="radio" name="align-items"/>
        center<input type="radio" name="align-items"/>
        base-line<input type="radio" name="align-items"/>
        </span>  
    <div id="align-items" class="stretch">
　　　　<p style="font-size: 12px">1</p>
　　　　<p>2</p>
　　　　<p style="font-size: 28px">3</p>
　　　　<p style="font-size: 40px">4</p>
　　</div>

.ul2{width:600px;height: 200px;background: #999;display: flex;list-style: none;}
            .ul2 li{height: 100px;width: 100px;background: #444}
            .ul2 li:nth-of-type(2){flex-basis: 600px;background: #555}

<h1>flex-basis</h1>
    <ul class="ul2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>