flex 布局可以横向布局: 如 html 代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="format-detection" content="telephone=no">
- <title>flex 横向布局 </title>
- <style>
- *{
- padding: 0;
- margin: 0;
- }
- html,body{
- width: 100%;
- height: 100%;
- }
- .main{
- width: 96%;
- margin: 0 auto;
- height: 100%;
- display: flex;
- flex-flow: row;
- }
- .row-one{
- width: 200px;
- background: red;
- }
- .row-two{
- flex:1;
- background: rosybrown;
- }
- .row-three{
- flex: 1;
- background: darkgrey;
- }
- </style>
- </head>
- <body>
- <div class="main">
- <div class="row-one"> 我是第一列 </div>
- <div class="row-two"> 我是第二列 </div>
- <div class="row-three"> 我是第三列 </div>
- </div>
- </body>
- </html>
flex 还可以纵向布局:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="format-detection" content="telephone=no">
- <title>display:flex</title>
- <style type="text/CSS">
- *{
- padding: 0;
- margin: 0;
- }
- html,body{
- height: 100%;
- width: 100%;
- overflow: auto;
- overflow-x: hidden;
- }
- .wrap{
- width:100%;
- height:100%;
- display:flex;
- flex-flow: column;
- }
- .sectionOne{
- background:orange;
- flex:1;
- width: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- }
- .sectionThree{
- height:100px;
- background:green;
- }
- </style>
- </head>
- <body>
- <article class="wrap">
- <section class="sectionOne">01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- 01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>01<br/>
- </section>
- <section class="sectionThree">03</section>
- </article>
- </body>
- </html>
但是后来百度了一下 flex 的兼容性不是很好:
在 android 平台的 uc 浏览器和微信浏览器中使用 display: flex; 会出问题.
使用 display: flex; 的时候需要加上 display: -webkit-box;
使用 flex: 1; 的时候要加上:
css 代码
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
使用 align-items: center; 的时候需要加上:-webkit-box-align: center;
使用 flex-direction: column; 的时候需要加上:
css 代码
- -webkit-box-orient: vertical;
- -moz-box-orient: vertical;
- box-orient: vertical;
这里有个 demo 大家可以看一下
请点击:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- <title>Demo for flex on uc</title>
- <style type="text/css">
- html,body{
- padding: 0;
- margin: 0;
- }
- .demo1{
- background-color: yellow;
- text-align: center;
- height: 80px;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
- /* for uc */
- display: -webkit-box;
- -webkit-box-align: center;
- }
- .demo1>div{
- background-color: green;
- margin: 2px;
- -webkit-flex: 1;
- flex: 1;
- /* for uc */
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- }
- .demo2{
- background-color: yellow;
- width: 80px;
- height: 200px;
- display: -webkit-flex;
- display: flex;
- -webkit-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: center;
- align-items: center;
- /* for uc */
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -moz-box-orient: vertical;
- box-orient: vertical;
- -webkit-box-align: center;
- }
- .demo2>div{
- background-color: green;
- width: 40px;
- margin: 2px;
- -webkit-flex: 1;
- flex: 1;
- /* for uc */
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- }
- </style>
- </head>
- <body>
- <h2 > 左右排列, 上下居中 </h2>
- <div class="demo1">
- <div>flex</div>
- <div>flex</div>
- <div>flex</div>
- <div>flex</div>
- <div>flex</div>
- </div>
- <h2 > 上下排列, 左右居中 </h2>
- <div class="demo2">
- <div>flex</div>
- <div>flex</div>
- <div>flex</div>
- <div>flex</div>
- <div>flex</div>
- </div>
- </body>
- </html>