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

弹性盒 flexbil box or flexbox,         css3的一种布局模式,页面可以适应屏幕大小与设备确保元素保持原来布局的方式，由弹性容器flex container,弹性子元素flex item组成，设置display来实现。         x轴代表主轴，从左到右，y轴代表侧轴，从上到下,主轴不一定是水平的，取决于justify-content，伸缩项目放置在伸缩容器内从主轴的起点main-start到终点main-end，主轴的尺寸main-size,伸缩项目在主轴的宽高对着主轴的方向就是主轴的尺寸。         主轴main axis 侧轴cross axis             display:flex|inline-flex             flex-direction:row|row-reverse|column|column-reverse;主轴             flex-wrap:wrap|nowrap|wrap-reverse;设置伸缩子元素在缩小窗口时是否换行             justify-content:flex-start|flex-end|center|space-between|space-around             align-item:flex-start|flex-end|center|base-line|stretch             align-content:flex-start|flex-end|center|space-between|space-around|stretch  display，flex-direction，flex-wrap，justify-content的效果

*{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>

js部分

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";}}   

align-items的效果

.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>

 

align-content的效果

.cflex-start{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-start;flex-wrap:wrap}
            .cflex-end{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-end;flex-wrap:wrap}
            .ccenter{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:center;flex-wrap:wrap}
            .cspace-between{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-between;flex-wrap:wrap}
            .cspace-around{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-around;flex-wrap:wrap}
            .cstretch{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:stretch;flex-wrap:wrap}

 <h1>align-content(设置伸缩子元素在缩小窗口时是否换行)</h1>
    <span>
　　　　  stretch<input type="radio" name="align-content"/>
        flex-start<input type="radio" name="align-content"  />
        flex-end<input type="radio" name="align-content"/>
        center<input type="radio" name="align-content"/>
        space-between<input type="radio" name="align-content"/>
        space-around<input type="radio" name="align-content"/>
    </span>  
    <div id="align-content" class="cstretch">
        <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>    

btnFlex[19].onclick = function (){
    if(this.checked){
        oDiv[5].setAttribute("class","cstretch");}}
btnFlex[20].onclick = function (){
    if(this.checked){
        oDiv[5].setAttribute("class","cflex-start");}}
btnFlex[21].onclick = function (){
    if(this.checked){
        oDiv[5].setAttribute("class","cflex-end");}}
btnFlex[22].onclick = function (){
    if(this.checked){
        oDiv[5].setAttribute("class","ccenter");}}      
btnFlex[23].onclick = function (){
    if(this.checked){
        oDiv[5].setAttribute("class","cspace-between");}}  
btnFlex[24].onclick = function (){
    if(this.checked){
        oDiv[5].setAttribute("class","cspace-around");}}  

写在子元素上的属性             flex:none|flex-grow|flex-shrink|flex-basis;默认0 1 auto                 复合属性，如果flex:1则计算值为flex:1 1 0;auto则是1 1 auto,none则是0 0 auto             flex-grow:;  flex-grow:<number>(default 0)不允许负值，默认0不分配空间，1分配                 设置或检索弹性盒的扩展比例，根据弹性盒子元素的扩展因子作为比率来分配剩余空间             flex-shrink:;flex-shrink:<number>(default 1)；                 分配超出的空间             flex-basis：设置或检索弹性盒的伸缩基准值，                 auto：无特定宽度，取决于其他属性                 <length>：用长度值来定义宽度，不能负值                 <percentage>:百分比，不能负值             oder:<integer>                 设置子元素的出现顺序；integer整数值，可以负值，数值小的排前面，默认0             align-self:auto|flex-start|flex-end|center|baseline|stretch                 设置该弹性元素的在侧轴方向上的对齐方式                 auto：取决去父元素的align-items值,如果没有，则为stretch flex-grow  　　以1比2分配剩余空间，210-50-100=60,60/（1+2）然后等分

.box{width: 210px;height: 30px;;border: 1px solid #333;display: flex}
            .box1{width: 50px;background: #f00;flex-grow: 1}
            .box2{width: 100px;background:#0f0;flex-grow: 2}

<div class="box">
     <div class="box1">是非得失</div><div class="box2">送豆腐豆腐</div>
</div>

flex-shirink  　　超出的空间是150+100-220=30px，加权总值 150*1+100*2=350         box4被移除的空间比例=150*1/320*40=18.75;150-18.75         box5=100*2/320*40=21.25;100-21.25

.box3{width: 220px;height: 30px;border: 1px solid #333;display: flex}
            .box4{width: 150px;background: #f00;flex-shrink: 1}
            .box5{width: 100px;background:#0f0;flex-shrink: 2}

<div class="box3">
       <div class="box4">是非得失</div><div class="box5">送豆腐豆腐</div>
</div>

flex-basis：flex-shrink默认auto，设置了flex-basis之后，变成了1:6:1分配空间

.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>    

oder属性,子元素排位子

.ul1{height: 100px;width: 600px;background: #999;display: flex;list-style: none;}
            .ul1 li{width: 100px;margin-right: 20px;background: #333}
            .ul1 li:nth-child(3),.ul1 li:nth-child(5){order: 1;}

<ul class="ul1">
   <li>1</li>
　　<li>2</li>
　　<li>3</li>
　　<li>4</li>
　　<li>5</li>
</ul>

align-self属性，子元素的侧轴方向起始位置

.ul3{height: 100px;width: 800px;padding: 20px; background: #999;display: flex;list-style: none;}
            .ul3 li{width: 100px;margin-right: 20px;background: #333}
            .ul3 li:nth-child(1){align-self: auto;}
            .ul3 li:nth-child(2){align-self: flex-start;}
            .ul3 li:nth-child(3){align-self: flex-end;}
            .ul3 li:nth-child(4){align-self: center;}
            .ul3 li:nth-child(5){align-self: baseline;padding: 20px}
            .ul3 li:nth-child(6){align-self: baseline;}
            .ul3 li:nth-child(7){align-self: stretch;}

媒体查询             根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）设定css，由媒体类型和一个或多个的检测媒体特性的条件表达式             可用于检测媒体特性的有width,height、color等，在不改变媒体内容下，为特定设备提供样式             语法一                 @media mediatype and|not|only(media feature){};             语法二                 <link rel="stylesheet" media="mediatype and|not|only(media feature) href="" />             media query语法支持设备                 -：-                 all:所有设备；                 aural:用于语音和音频生成器                 braille：用于触觉反馈设备                 embossed:适用于凸点设备（盲文）印刷设备                 handheld：用于小型或手提设备                 print:打印机                 projection:投影图像：幻灯机                 screen:计算机显示器,常用                 tty:固定间距字符格，如电传打字机和终端                 tv:电视             media query语法特性                 见图             移动端布局：单位px em                 1：百分比(弹性)布局                     顶部与底部高度与位置不变，中间条目的左边与右边不随分辨率变化                 2：rem等比缩放布局                     局部根据分辨率放大缩小                 px问题，比较精确，用户放大缩小浏览的时候，改变了字体的大小，页面布局会被打破，这时可以用em:font size of the element(相对于父元素)                 rem（web app使用）                     font size of the root element;相对于根元素的字体大小的单位。是一个相对单位                     好处：等比例所有的屏幕。rem是通过根元素进行适配的，网页的根元素html通过设置字体大小就可以控制rem的大小。 媒体查询

@media screen and (min-width:1000px) {
    body {background:#0f0;} 
    }
@media screen and (min-width:800px) and (max-width:1000px) {
    body {background:#f00;} 
    }
@media screen and (max-width:800px) {
    body{background:#00f;} 
    }
/*  rem（web app使用）用根元素的font-size作为单位去匹配所有的单位 */
@media screen and (min-width:1000px) {
    html{font-size: 48px;} 
}
@media screen and (max-width: 800px) and (min-width:1000px) {
    html{font-size: 36px;} 
}
@media screen and (min-width:800px) {
    html{font-size: 24px;} 
}
     .input2{width: 3rem;height: 2rem;background: #0ff;border: none;color: #fff;font-size: 1rem}   

<h1>rem（web app使用）</h1>
    <input class="input2" value="确定" type="submit">

练习

.div{display:flex;flex-wrap: nowrap;background: #999;padding: 10px;width: 600px}
            .div div{transition: all 0.5s;height: 100px;width: 200px;border:solid 1px #111;}
            .div div:nth-child(1){background: url("../img/1.jpg")}
            .div div:nth-child(2){background: url("../img/2.jpg")}
            .div div:nth-child(3){background: url("../img/3.jpg")}
            .div div:nth-child(4){background: url("../img/4.jpg")}
            .div div:nth-child(5){background: url("../img/3.jpg")}
            .div div:hover{width:400px}

<h1>练习</h1>
    <div class="div">
       <div></div>
　　　　<div></div>
　　　　<div></div>
　　　　<div></div>
　　　　<div></div>
    </div>