flex 弹性盒子模型一些案例.html

Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。

Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

自适应导航

<ul class="navigation">
    <li><a href="#">首页</a></li>
    <li><a href="#">简介</a></li>
    <li><a href="#">公司介绍</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

 <style>
     /*Flexbox是一个相当优秀的属性，它可能会成为未来版面布局的一部分。
     如果考虑到只处理移动方面的，那么兼容性就可以忽略了。
     -moz代表firefox浏览器私有属性
     -ms代表IE浏览器私有属性
     -webkit代表chrome、safari私有属性*/
     .navigation{list-style:none;margin:;background:deepskyblue;
         display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
         display:flex;/*多栏多列布局*/
         -webkit-flex-flow:row wrap;/*让灵活的项目在必要的时候进行拆行*/
         justify-content:flex-end; /*<div> 元素的各项周围留有空白*/ }

     .navigation a{text-decoration:none;display:block;padding:1em;color:white}
     .navigation a:hover{background:#00AEE8}
     @media all and (max-width:800px){.navigation{justify-content:space-around}
     }
     @media all and (max-width:600px){.navigation{-webkit-flex-flow:column wrap; padding:}}
     /*宽度小于600的时候自动换行：*/
         .navigation a{text-align:center;padding:10px;border-top:1px solid rgba(255,255,255,0.3);
             border-bottom:1px solid rgba(0,0,0,0.1)}
         .navigation li:last-of-type a{background:#00AEE8; border-bottom:;}

     /*指定父元素的最后一个 li 元素的背景色： li:nth-child(3) li的第3个元素   li:first-child 父元素的第一个子元素li里的内容*/

 </style>

居中对齐布局

<ul class="flex-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

 <style>
     .flex-list{padding:;margin:;list-style:none;display:
             -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
         display:flex;-webkit-flex-flow:row nowrap;
         justify-content: center; -webkit-flex-flow:row wrap
     }
     .flex-list li{background:green;padding:5px;width:200px;height:150px; margin:10px;
         line-height:150px;color:white;font-weight:bold;font-size:3em;text-align:center}

     .aaa{ justify-content: center; -webkit-flex-flow:row wrap;}
 </style>

三栏布局

<div class="wrapper">
    <header class="header">Header</header>
    <article class="main">
        <p>这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，
            这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，</p>
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
    <footer class="footer">Footer</footer>
</div>

 <style>
     .wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
         display:flex;-webkit-flex-flow:row wrap;font-weight:bold;text-align:center}
     .wrapper > *{padding:10px;flex:1 100%}
     .header{background:tomato}
     .footer{background:lightgreen}
     .main{text-align:left;background:deepskyblue;}
     .aside-1{background:gold}
     .aside-2{background:hotpink}
     @media all and (min-width:600px){.aside{flex:1 auto}/*让所有灵活的项目都带有相同的长度，忽略它们的内容：*/
     }@media all and (min-width:800px){.main{flex:2 0px}
         .aside-1{order:}/*用整数值来定义排列顺序，数值小的排在前面。可以为负值*/
         .main{order:}
         .aside-2{order:}
         .footer{order:}
     }
 </style>

效果图：