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>

 1 <style>  2     /*Flexbox是一個至關優秀的屬性，它可能會成爲將來版面佈局的一部分。  3  若是考慮到只處理移動方面的，那麼兼容性就能夠忽略了。  4  -moz表明firefox瀏覽器私有屬性  5  -ms表明IE瀏覽器私有屬性  6  -webkit表明chrome、safari私有屬性*/
 7  .navigation{list-style:none;margin:0;background:deepskyblue;
 8  display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
 9  display:flex;/*多欄多列布局*/
10  -webkit-flex-flow:row wrap;/*讓靈活的項目在必要的時候進行拆行*/
11  justify-content:flex-end; /*<div> 元素的各項周圍留有空白*/ }
12 
13  .navigation a{text-decoration:none;display:block;padding:1em;color:white}
14  .navigation a:hover{background:#00AEE8}
15  @media all and (max-width:800px){.navigation{justify-content:space-around}
16  } 17  @media all and (max-width:600px){.navigation{-webkit-flex-flow:column wrap; padding:0}} 18     /*寬度小於600的時候自動換行：*/
19  .navigation a{text-align:center;padding:10px;border-top:1px solid rgba(255,255,255,0.3);
20  border-bottom:1px solid rgba(0,0,0,0.1)}
21  .navigation li:last-of-type a{background:#00AEE8; border-bottom: 0;}
22 
23     /*指定父元素的最後一個 li 元素的背景色： li:nth-child(3) li的第3個元素 li:first-child 父元素的第一個子元素li裏的內容*/
24 
25 </style>

 

居中對齊佈局

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

 1 <style>  2  .flex-list{padding:0;margin:0;list-style:none;display:
 3  -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
 4  display:flex;-webkit-flex-flow:row nowrap;
 5  justify-content: center; -webkit-flex-flow:row wrap  6     }
 7  .flex-list li{background:green;padding:5px;width:200px;height:150px; margin:10px;
 8  line-height:150px;color:white;font-weight:bold;font-size:3em;text-align:center}
 9 
10  .aaa{ justify-content: center; -webkit-flex-flow:row wrap;}
11 </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>

 1 <style>  2  .wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
 3  display:flex;-webkit-flex-flow:row wrap;font-weight:bold;text-align:center}
 4  .wrapper > *{padding:10px;flex:1 100%}
 5  .header{background:tomato}
 6  .footer{background:lightgreen}
 7  .main{text-align:left;background:deepskyblue;}
 8  .aside-1{background:gold}
 9  .aside-2{background:hotpink}
10  @media all and (min-width:600px){.aside{flex:1 auto}/*讓全部靈活的項目都帶有相同的長度，忽略它們的內容：*/
11  }@media all and (min-width:800px){.main{flex:2 0px}
12  .aside-1{order:1}/*用整數值來定義排列順序，數值小的排在前面。能夠爲負值*/
13  .main{order:2}
14  .aside-2{order:3}
15  .footer{order:4}
16  } 17 </style>

 

效果圖：