css3彈性盒模型

時間 2019-11-12

標籤 css3 css 彈性模型欄目 CSS 简体版

原文原文鏈接

仍是那句話，學了過不了多久就忘了，因此本人僅僅只是當個筆記的做用，沒有什麼高深的看法，勿噴！css

此次該給css3中的彈性盒模型作作筆記了html

插入一段代碼css3

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test-self</title>
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;}
.box div{width:100px;height:100px;background:red;border:1px solid #000;}
</style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

如上所示，給父元素加display:box或diaplay:inline-box便可用彈性盒模型，上述代碼最終效果就像給子元素設置了float:left;屬性同樣；web

Box-orient 定義盒模型的佈局方向 Horizontal 水平顯示 vertical 垂直方向，這條屬性能夠設置子元素是水平或者垂直排列、佈局

box-direction 元素排列順序 Normal 正序 Reverse 反序，這條屬性是規定子元素的排列順序。固然，咱們會用flex

box-ordinal-group 設置元素的具體位置這個屬性來設置每一個子元素更具體的位置，如ui

.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

　　下面講講盒模型中盒子的彈性空間Box-flexspa

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
</style>
</head>
<body>
<div class="box">
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

　　如上所示，最終的效果就是第一個div佔300px，後面根據比例佔不一樣的分數，第二個盒子佔剩餘空間的2/14.code

也就是說子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 全部子元素的box-flex屬性值的和。orm

最後，來說講一個很是有用的東西。box-pax 對盒子的富裕空間的管理。

Start 全部子元素在盒子左側顯示，富裕空間在右側 End 全部子元素在盒子右側顯示，富裕空間在左側 Center 全部子元素居中 Justify 富餘空間在子元素之間平均分佈

經過這些屬性的設置，能夠很方便的完成一些菜單之類的佈局，我的感受比float好用多了

在垂直方向上：

box-align 在垂直方向上對元素的位置進行管理 Star 全部子元素在據頂 End 全部子元素在據底 Center 全部子元素居中