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>  2     /*Flexbox是一个相当优秀的属性，它可能会成为未来版面布局的一部分。  3  如果考虑到只处理移动方面的，那么兼容性就可以忽略了。  4  -moz代表firefox浏览器私有属性  5  -ms代表IE浏览器私有属性  6  -webkit代表chrome、safari私有属性*/
 .navigation{list-style:none;margin:0;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}
 } 17  @media all and (max-width:600px){.navigation{-webkit-flex-flow:column wrap; padding:0}} 18     /*宽度小于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: 0;}

    /*指定父元素的最后一个 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>  2  .flex-list{padding:0;margin:0;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  6     }
 .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>  2  .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:1}/*用整数值来定义排列顺序，数值小的排在前面。可以为负值*/
 .main{order:2}
 .aside-2{order:3}
 .footer{order:4}
 } 17 </style>

 

效果图：