网页布局——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;
}

输出结果: