彈性盒模型
<!-- 彈性盒模型--box 1.注意在使用彈性盒模型的時候，父級必需要加 display:box或者display:inline-box flex: display:flex box: display:-webkit-box 2.box-orient定義盒模型的主軸方向 flex: flex-direction:row/column box: -webkit-box-orient horizontal 水平方向 vertical 垂直方向 3.box-direction 元素排列順序 flex: flex-direction:row-reverse/column-reverse; box: -webkit-box-direction normal 正序 reverse 反序 4.box-pack主軸方向富裕空間管理 flex: justify-content:flex-start/flex-end/center/space-between/space-around; box: -webkit-box-pack start全部子元素在盒子左側顯示，富裕空間在右側 end全部子元素在盒子右側顯示，富裕空間在左 center全部子元素居中 justify富裕空間在子元素之間平均分配 5.box-align側軸方向富裕的空間管理 flex: align-items:flex-start/flex-end/center/baseline; box: -webkit-box-align start全部子元素在據頂 end全部子元素在據底 center全部子元素居中 6.box-flex定義盒子的彈性空間 flex: flex-grow box: -webkit-box-flex 子元素的尺寸=盒子的尺寸*(子元素的box-flex屬性/全部子元素的box-flex屬性值的和) 7.box-ordinal-group設置元素的具體位置 flex: order box: -webkit-box-ordinal-group --> <div id="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
1.新版display:flex
body{
margin: 0 auto;
}
#box{
height: 100px;
border: 1px solid #000;
/*先版彈性盒模型*/
display:flex;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
margin: auto;
}
設置主軸方向和元素排列順序
body{
margin: 0 auto;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
display:flex;
/*設置主軸方向*/
/*flex-direction:row;*/
/*flex-direction:column;*/
/*元素排列順序*/
/*橫向從主軸的最右邊往左反向排序*/
/*flex-direction:row-reverse;*/
/*橫向從主軸的最底部往上反向排序*/
flex-direction:column-reverse;
/*display: -webkit-box;*/
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
主軸方向富裕空間管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
display:flex;
/*全部子元素在盒子左側顯示，富裕空間在右側*/
/*justify-content: flex-start;*/
/*全部子元素在盒子右側顯示，富裕空間在左側*/
/*justify-content: flex-end;*/
/*全部子元素居中*/
/*justify-content: center;*/
/*富裕空間平均分配在每兩個元素之間*/
/*justify-content: space-between;*/
/*富裕空間平均分配在每一個元素兩側*/
justify-content: space-around;
/*老版彈性盒模型*/
/*display: -webkit-box;*/
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
側軸方向富裕空間管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
display:flex;
/*元素在側軸開始位置，富裕空間在側軸結束位置*/
/*align-items:flex-start;*/
/*元素在側軸結束位置，富裕空間在側軸開始位置*/
/*align-items:flex-end;*/
/*元素在側軸中間位置，富裕空間在側軸兩側*/
/*align-items:center;*/
/*根據側軸上文字的基線對齊*/
align-items:baseline;
/*display: -webkit-box;*/
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
#box div:nth-of-type(2){
line-height: 50px;
}
2.老版彈性盒模型display:-webkit-box; display:inline-box;
body{
margin: 0 auto;
}
#box{
height: 100px;
border: 1px solid #000;
/*先版彈性盒模型*/
/*display:flex;*/
display: -webkit-box;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
設置主軸方向和元素排列順序
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
/*display:flex;*/
/*老版彈性盒模型*/
display: -webkit-box;
/*設置主軸方向*/
/*-webkit-box-orient:horizontal;*/
/*-webkit-box-orient:vertical;*/
/*元素排列順序*/
/*正序從左向右*/
/*-webkit-box-direction:normal;*/
/*-webkit-box-direction:reverse;*/
/*兩個配合獲得縱向的反向順序*/
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
主軸方向富裕空間管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
/*display:flex;*/
display: -webkit-box;
/*全部子元素在盒子左側顯示，富裕空間在右側*/
/*-webkit-box-pack:start;*/
/*全部子元素在盒子右側顯示，富裕空間在左*/
/*-webkit-box-pack:end;*/
/*全部子元素居中*/
/*-webkit-box-pack:center;*/
/*富裕空間在子元素之間平均分配*/
-webkit-box-pack:justify;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
側軸方向富裕空間管理
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
/*display:flex;*/
display: -webkit-box;
/*元素在側軸開始位置，富裕空間在側軸結束位置*/
/*-webkit-box-align:start;*/
/*元素在側軸結束位置，富裕空間在側軸開始位置*/
/*-webkit-box-align:end;*/
/*全部子元素居中*/
-webkit-box-align:center;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
定義盒子的彈性空間
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
/*display:flex;*/
display: -webkit-box;
}
#box div{
/*新版*/
/*flex-grow:1;*/
/*老版*/
-webkit-box-flex:1;
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
設置元素的具體位置
body{
margin: 0;
}
#box{
height: 100px;
border: 1px solid #000;
/*新版彈性盒模型*/
/*display:flex;*/
display: -webkit-box;
}
#box div{
width: 50px;
height: 50px;
background: red;
font-size: 20px;
color: #fff;
}
#box div:nth-of-type(1){
/*新版*/
/*數值越小越靠前，能夠接收負值*/
/*order: 4;*/
/*老版*/
/*數值越小越靠前，接收的小於0的值都處理爲1*/
-webkit-box-ordinal-group:4;
}
#box div:nth-of-type(2){
/*新版*/
/*order: 3;*/
-webkit-box-ordinal-group:3;
}
#box div:nth-of-type(3){
/*新版*/
/*order: 2;*/
-webkit-box-ordinal-group:2;
}
#box div:nth-of-type(4){
/*新版*/
/*order: 1;*/
-webkit-box-ordinal-group:1;
}
例子淘寶導航javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title></title>
<script type="text/javascript">
(function(){
var html=document.documentElement;
var hWidth=html.getBoundingClientRect().width;
html.style.fontSize=hWidth/15+'px';
})()
</script>
<style type="text/css">
body{
margin: 0;
}
a{
text-decoration: none;
}
.box{
font-size: 0.42rem;
display: -webkit-box;
display: flex;
padding: 0 0.5rem;
}
.box div{
text-align: center;
width: 0;
-webkit-box-flex:1;
flex-grow:1;
}
.box div a{
line-height: 1rem;
}
.box div a:before{
margin: 0 auto;
display: block;
content: '';
width: 1.81rem;
height: 1.81rem;
background: url(img/tm1.png);
background-size: 10.125rem 3.888888888888889rem;
}
.box:nth-of-type(1) div:nth-of-type(1) a:before{
background-position: -0.14rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(2) a:before{
background-position: -2.13rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(3) a:before{
background-position: -4.13rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(4) a:before{
background-position: -8.13rem -0.05rem;
}
.box:nth-of-type(1) div:nth-of-type(5) a:before{
background-position: -12.24rem -0.05rem;
}
.box:nth-of-type(2) div:nth-of-type(1) a:before{
background-position: -0.14rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(2) a:before{
background-position: -2.13rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(3) a:before{
background-position: -4.13rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(4) a:before{
background-position: -8.13rem -2.09rem;
}
.box:nth-of-type(2) div:nth-of-type(5) a:before{
background-position: -12.24rem -2.09rem;
}
</style>
</head>
<body>
<div class="box">
<div><a href="javascript:;">天貓</a></div>
<div><a href="javascript:;">聚划算</a></div>
<div><a href="javascript:;">天貓國際</a></div>
<div><a href="javascript:;">外賣</a></div>
<div><a href="javascript:;">天貓超市</a></div>
</div>
<div class="box">
<div><a href="javascript:;">充值中心</a></div>
<div><a href="javascript:;">肥豬旅行</a></div>
<div><a href="javascript:;">領金幣</a></div>
<div><a href="javascript:;">拍賣</a></div>
<div><a href="javascript:;">分類</a></div>
</div>
</body>
</html>
相關文章
- 1. 彈性盒模型
- 2. css3盒模型、彈性盒模型、怪異盒模型
- 3. css3彈性盒模型
- 4. flex-box 彈性盒模型
- 5. 彈性盒模型(flex)
- 6. css3彈性盒模型（Flexbox）
- 7. 16.flexbox彈性盒模型
- 8. 彈性盒模型淺讀
- 9. CSS3彈性盒模型
- 10. 彈性盒模型（flex-box）
- 更多相關文章...
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • jQuery Mobile 彈窗 - jQuery Mobile 教程
- • 委託模式
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 彈性盒模型
- 2. css3盒模型、彈性盒模型、怪異盒模型
- 3. css3彈性盒模型
- 4. flex-box 彈性盒模型
- 5. 彈性盒模型(flex)
- 6. css3彈性盒模型（Flexbox）
- 7. 16.flexbox彈性盒模型
- 8. 彈性盒模型淺讀
- 9. CSS3彈性盒模型
- 10. 彈性盒模型（flex-box）