網頁佈局——Flex彈性框佈局

時間 2019-11-08

標籤網頁佈局 flex 彈性欄目 HTML 简体版

原文原文鏈接

佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。css

須要安卓4.4及以上版本可使用display:-webkit-flex;，安卓4.4如下使用display:-webkit-box;html

如須要更深刻了解flex佈局，請參考阮一峯博文——Flex 佈局教程：實例篇

如今大部分瀏覽器都支持flexbox佈局方法。react和react-native中幾乎所有采用flex來佈局。react

佈局導航菜單：web

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>flex佈局導航菜單</title>
 6     <style>
 7             body{
 8                 background: white;
 9                 font-family: 'Open Sans', sans-serif;
10             }
11             .main ul{
12                 list-style: none;
13                 display: flex;    /*<li>元素由垂直排列變成了水平排列。這是由於flex的flex-direction屬性的默認值爲row*/
14             }
15             .main li{width:100px;}
16             .main a{
17                 text-decoration: none;
18                 font-size: 21px;
19                 font-weight: 600;
20                 color: #00a9d9;
21             }
22             .main a:hover{text-decoration: underline;}
23     </style>
24 </head>
25 <body>
26     <nav class="main">
27         <ul >
28             <li><a href="#">Home</a></li>
29             <li><a href="#">News</a></li>
30             <li><a href="#">Contact</a></li>
31             <li><a href="#">About</a></li>
32         </ul>
33     </nav>
34 </body>
35 </html>
36 <!-- 
37     flex會讓<ul>這個容器成爲一個具備flex功能的block-level容器，而且會影響到它的子元素的佈局表現。
38     若是想讓<ul>成爲一個inline元素，能夠寫成display: inline-flex，這樣它仍然具備flex container的效果，同時也表現爲一個inline元素，就像<img>同樣。
39     當加上display: flex;後，<li>元素由垂直排列變成了水平排列。這是由於flex的flex-direction屬性的默認值爲row,若是咱們添加上flex-direction:column,
40     <li>元素又變爲了垂直排列
41  -->

效果以下：react-native

早期時候咱們作網站佈局的使用表格(table)，而後使用浮動(float)、定位(position)和內聯塊(inline-block)，但全部這些方法本質上來說都是hacks，存留了不少須要實現的重要功能問題(例如，垂直居中)。瀏覽器

display:flex和display:box均可用於彈性佈局，不一樣的是display:box是2009年的命名，已通過時，用的時候須要加上前綴；display:flex是2012年以後的命名。在實際的測試中display:flex不能徹底的替代display:box。display:flex的瀏覽器兼容性比較麻煩。ide

此外我還寫了一個Flex佈局的屬性詳解的文章詳細的介紹了各類屬性。佈局

計算一個盒子佔用的空間是 content + padding + border + margin測試

flexbox 佈局即彈性盒子佈局，它的特色是盒子原本就是並列的，只須要指定寬度flex

1.例子

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>登錄</title>
 6     <style type="text/css">
 7         html{width: 100%;height: 100%;}  /*整個頁面的居中*/
 8         body{
 9             width: 100%;
10             height: 100%;
11             display: flex;             /*flex彈性佈局*/
12             justify-content: center;
13             align-items: center;
14         }
15         #login{
16             width: 300px;
17             height: 300px;
18             border: 1px black solid; 
19             display: flex;
20             flex-direction: column;        /*元素的排列方向爲垂直*/
21             justify-content: center;    /*水平居中對齊*/
22             align-items: center;        /*垂直居中對齊*/
23         }
24     </style>
25 </head>
26 <body>
27     <div id="login">
28         <h1>登錄</h1>
29         <input type="text"><br>
30         <input type="password"><br>
31         <button>肯定</button>
32     </div>
33 </body>
34 </html>

輸出結果:

2.例子

一個經典的三欄佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS 佈局</title>
 6 </head>
 7 <style>
 8 .container{
 9     height:200px;
10     width: 200px;
11     display: flex
12 }
13 .left{
14     background-color: red; 
15     flex: 1;
16 }
17 .middle{
18     background-color: yellow; 
19     flex: 1;    
20 }
21 .right{
22     background-color: green;
23     flex: 1;
24 }
25 </style>
26 <body>
27     <div class=container>
28         <div class=left></div>
29         <div class=middle></div>
30         <div class=right></div>
31     </div>
32 </body>
33 </html>

輸出結果：

有時咱們可能須要兩邊定寬，中間自適應，那麼能夠這樣寫：

.left{
　　background-color: red; 
　　width: 20px;
}
.middle{
　　background-color: yellow; 
　　flex: 1; 
}
.right{
　　background-color: green;
　　width: 20px;
}

輸出結果:

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。