使用flex寫幾個簡單佈局
flex佈局小遊戲
http://www.flexboxdefense.com/
1.手機頁面佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex手機頁面基本佈局</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div id="container">
<header>header</header>
<main>
<p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
<p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
</main>
<footer>
<ul>
<li>按鈕</li>
<li>按鈕</li>
<li>按鈕</li>
<li>按鈕</li>
</ul>
</footer>
</div>
</body>
</html>
*{margin:0;padding:0;}
ul,li{list-style:none}
#container{
height:100vh;
background:#ccc;
display: flex;
flex-direction:column;
}
header{
height:50px;
background:#aaaad1;
}
main{
overflow:auto;
}
footer{
height:80px;
}
ul{
display: flex;
height:100%;
}
ul>li{
border:1px solid black;
flex:1;
height:100%;
background:red;
}
main部分設置了overflow:auto
之後,出現滾動條,header和下方按鈕固定
演示地址:http://js.jirengu.com/saqulus...
2.產品列表
例如九個產品,每行三個展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex產品佈局</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
*{margin:0;padding:0;}
ul,li{list-style:none}
ul{
width:350px;
margin:0 auto;
display: flex;
border:1px solid black;
background:#ddd;
flex-wrap:wrap;
justify-content:space-between;
}
li{
width:100px;
height:100px;
background:#ccc;
border:1px solid red ;
margin:10px 0;
}
演示地址:http://js.jirengu.com/xecuqam...
3.PC佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>header</header>
<div class="content">
<div class="aside">aside固定寬度</div>
<div class="main">main自動填充寬度</div>
<div class="nav">nav固定寬度</div>
</div>
<footer>footer</footer>
</body>
</html>
header,footer{
height:100px;
background:#ccc;
}
.content{
display:flex;
}
.content .aside{
width:250px;
background:red;
}
.content .main{
height:500px;
flex:1;
}
.content .nav{
width:250px;
background:green;
}
flex:1
,自動填充寬度。
4.完美居中
.content{
display:flex;
justify-content:center;
align-items:center;
}
不管裏面的子元素寬高是多少,都在垂直和水平方向居中。
佈局的套路
口訣
float:
- 兒子全加 float: left (right)
- 老子加 .clearfix
flex:
- 老子加 display: flex
- 老子加 justify-content: space-between;
如果寬度不夠,可以用 margin: 0 -4px;
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
原則
- 不到萬不得已,不要寫死 width 和 height
- 儘量用高級語法,如 calc、flex
- 如果是 IE,就全部寫死
例如我們要做一個上面這樣設計稿的佈局
浮動佈局套路
套路:
- 兒子全加
float: left
(right) - 老子加
.clearfix
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float佈局套路</title>
</head>
<body>
<div class="father clearfix">
<div class="child1 child">兒子1</div>
<div class="child2 child">兒子3</div>
</div>
</body>
</html>
.child{
float:left;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.father{
border:1px solid black;
}
.child1{
width:30%;
background:red;
}
.child2{
background:yellow;
width:70%;
}
可以看到不管如何拉長,child1和child2永遠佔30%和70%。且兩個child DIV只用來佈局,然後內容寫在裏面,如果要加padding等邊距,就得在裏面再寫一個div,child相當於是一個套在外面的wrapper,用來佈局。
演示地址:http://js.jirengu.com/socoget...
使用float佈局的時候,要分清佈局塊和內容塊!
例子:簡單的頭部導航佈局
演示地址:http://js.jirengu.com/wabuluz...
舉例使用:用float做平均佈局
寬800的div上顯示8張圖,每列四張。
演示地址:
http://js.jirengu.com/casodig...
加一個wrapper的作用是使用負margin擴大8像素,爲了不與外面的pics衝突(pics用來佈局,居中)所以再包裹一個div。又一次顯示出佈局塊和內容塊的區別。
如果使用flex佈局,只需要三行代碼。
diaplay:flex;
flex-wraP:wrap;
justify-content:space-between;
自動平均佈局。
使用calc
width是194px,定死的。如果不自己算picture的寬度
那麼就可以使用width:calc(25% - 8px)
左右不一樣比例的佈局
1:3使用float:
<div class="father clearfix">
<div class="child left"></div>
<div class="child right"></div>
</div>
CSS:
.clearfix::after{
content:'';
display:block;
clear:both;
}
.father{
width:500px;
background: #red;
border:1px solid red;
}
.child{
height:200px;
float: left;
}
.left{
width:33.33333%;
background: #ccc;
}
.right{
width:66.66666%;
background: #777;
}
如果想在1:3的塊之間加空隙,那麼這個已經成比例的佈局塊不要動,在裏面加div,然後裏面的div加上margin-right
就行了。還有一種方法就是width:cacl(33.3333% - 20px)
.
使用flex:
<div class="father2">
<div class="child2 left2"></div>
<div class="child2 right2"></div>
</div>
.father2{
width:500px;
border:1px solid red;
display:flex;
}
.child2{
height:200px;
}
.left2{
flex:1;
background: #ccc;
border:1px solid green;
}
.right2{
flex:0 0 33.3333%;
background: #777;
border:1px solid blue;
}
關鍵在於:
flex:1
自動佔滿剩餘空間!flex:0 0 33.3333%
固定寬度爲33.3333%!
或者也可以直接父親display:flex
,兒子1width:cacl(33.3333% - 20px)
,兒子2width:cacl(66.6666%)
演示地址:
http://js.jirengu.com/qovefuw...
阮一峯的flex佈局實例教程:
http://www.ruanyifeng.com/blo...
手機佈局
在需要修改的地方加上媒體查詢,然後修改相關CSS。主要需要修改的是width:auto
,直到左右不能滑動爲止。
請看我的博客,媒體查詢CSS5:移動端頁面(響應式)
圖片處理技巧
爲了防止圖片收縮,儘量不要使用img標籤,使用div標籤然後使用
background:transparent url('xxx') no-repeat center;
background-size:cover;
儘量完整顯示圖片
練習
分別用float和flex實現左右佈局
如圖:
float:
http://js.jirengu.com/goqebat...
flex:
http://js.jirengu.com/folonow...
做一個平均佈局
請打開這個 jsbin,完善代碼,
要求用 float + 負 margin 做一個平均佈局
演示地址:
http://js.jirengu.com/jaxepij...
把上面的佈局用 flex 實現
http://js.jirengu.com/huyihim...