flex-box 彈性盒模型

時間 2019-11-12

標籤 flex box 彈性模型欄目 Flex 简体版

原文原文鏈接

還記得盒模型嗎？css

除了盒模型以外css3爲咱們提供了一個彈性模型，稱之爲自適應佈局；html

接下來咱們看看怎麼用。css3

首先，咱們須要清楚的是彈性佈局有哪些優勢，web

以下：瀏覽器

優勢：
1 適應性強，在作不一樣屏幕分辨率的界面時很是實用
2 能夠隨意按照寬度、比例劃分元素的寬高
3 能夠輕鬆改變元素的顯示順序
4 自適應佈局實現快捷，易維護

理解彈性盒模型佈局

到目前爲止，咱們還不知道什麼是彈性模型，彈性模型能幹嗎，彆着急，咱們一點點來。測試

首先：flex

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:400px;
    background: #f0f0f0;
    margin:50px auto;
}
li{
    list-style: none;
    padding:25px;
}
ul :nth-child(1){
    background: #ccc;
}
ul :nth-child(2){
    background: #999;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

這是個人一個頁面佈局，毫無疑問，以上的佈局樣式以下圖：spa

這是正常的盒模型佈局方式。3d

display:box

接着咱們給ul填上一個屬性：

display:box;     //將對象做爲彈性盒模型顯示

以後咱們在看一下頁面顯示的佈局樣式：

看頁面的話顯然li的display屬性由塊屬性變行屬性了。

這只是個開始，display：box只是讓ul變爲彈性盒模型，接着還有不少更有意思的屬性。

box-orient：

接下來咱們給ul屬性添加以下css命令：

-webkit-box-orient: [horizontal | vertical] ;

horizontal //默認值 水平排列
vertical     //縱向排列

-webkit-box-orient:horizontal:

-webkit-box-orient:vertical:

屬性：由圖可看出此屬性表明着彈性盒模型對象的子元素的排列方式；取值有兩個，一個橫向，一個縱向。

box-pack & box-align

完事開頭難，頭已經開完了，接下來的屬性就簡單地說；

box-pack: 彈性盒模型對象的子元素的對齊方式,換言之，子元素排列時從哪邊起？

取值：

start：
設置彈性盒模型對象的子元素從開始位置對齊（大部分狀況等同於左對齊） //默認值
center：
設置彈性盒模型對象的子元素居中對齊
end：
設置彈性盒模型對象的子元素從結束位置對齊（大部分狀況等同於右對齊）
justify：
設置或彈性盒模型對象的子元素兩端對齊

box-align：彈性盒模型對象的子元素的對齊方式。

取值：

start：
設置彈性盒模型對象的子元素從開始位置對齊
center：
設置彈性盒模型對象的子元素居中對齊
end：
設置彈性盒模型對象的子元素從結束位置對齊
baseline：
設置彈性盒模型對象的子元素基線對齊
stretch：
設置彈性盒模型對象的子元素自適應父元素尺寸   //默認值

看着兩個意思彷佛相同？那他們兩個到底有什麼區別呢？看圖：

註明：此屬性的排列方式與box-orient屬性值有關。

如圖所示, 以上四個圖表明瞭box-orient與box-pack、box-orient與box-algin的關係及具體取值的排列方式。

box-flex

屬性：彈性盒模型對象的子元素如何分配其剩餘空間。

取值：number；

具體實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:100px;
    background: #f0f0f0;
    margin:50px auto;
    display: -webkit-box;
}
li{
    list-style: none;
    padding:25px;
}
ul :nth-child(1){
    background: #ccc;
}
ul :nth-child(2){
    background: #999;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

此段代碼再是沒有作任何操做，顯示如圖：

其中，帶背景色的五個塊分別爲5個li，而白色部分爲ul的空白部分。此時用box-flex屬性，

代碼以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:100px;
    background: #ffffff;
    margin:50px auto;
    display: -webkit-box;
}
li{
    list-style: none;
    padding:25px;
}
ul :nth-child(1){
    background: #ccc;

}
ul :nth-child(2){
    background: #999;
    -webkit-box-flex:1;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
    -webkit-box-flex:1;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

此時我給第二個及第四個li加上了box-flex的屬性，頁面變成：

顯然第二個及第四個li的寬度增長了。增長的部分是 [ulWidth 400 - liWidth 50 * li.length 5 ]/ box-flex+(此父級標籤下的全部的box-flex的屬性值相加) 的值；

意思是我須要獲得此父級元素（UL）剩餘的空白寬度，而後除上 box-flex 份值獲得一份box-flex 的值在按照具體的box-flex比例去分配 UL 的剩餘空白寬度。

box-ordinal-group

屬性：彈性盒模型對象的子元素的顯示順序；

取值：用整數值來定義彈性盒模型對象的子元素顯示順序。

數值較低的元素顯示在數值較高的元素前面；
相同數值的元素，它們的顯示順序取決於它們的代碼順序；

啥意思呢？意思就是說咱們能夠經過這個屬性給元素設置一個顯示順序。

看代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,ul,li{
    margin:0;
    padding:0;
}
body{
    background: #d2b2ce;
}
ul{
    width:400px;
    height:100px;
    background: #ffffff;
    margin:50px auto;
    display: -webkit-box;
}
li{
    list-style: none;
    width:50px;
    height:100px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: #fff;
}
ul :nth-child(1){
    background: #ccc;

}
ul :nth-child(2){
    background: #999;
    -webkit-box-flex:1;
}
ul :nth-child(3){
    background: #666;
}
ul :nth-child(4){
    background: #333;
    -webkit-box-flex:1;
}
ul :nth-child(5){
    background: #111;
}
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

這樣的一頁面顯示出來的效果如圖：

li很整齊的按照代碼順序排列出來。

以後我作了一些修改，我在每一個li中添加了box-ordinal-group這個屬性，而且設一些值。

我作了如下調整：

ul :nth-child(1){
    background: #ccc;
    -webkit-box-ordinal-group:5;

}
ul :nth-child(2){
    background: #999;
    -webkit-box-flex:1;
    -webkit-box-ordinal-group:4;
}
ul :nth-child(3){
    background: #666;
    -webkit-box-ordinal-group:3;
}
ul :nth-child(4){
    background: #333;
    -webkit-box-flex:1;
    -webkit-box-ordinal-group:1;
}
ul :nth-child(5){
    background: #111;
    -webkit-box-ordinal-group:2;
}

設置的順序是5 4 3 1 2 ，若是按照這個順序顯示li元素的話應該是 4 5 3 2 1.咱們看一下具體的實現是：

因此此屬性理解起來就至關於給元素設置了一個顯示順序。

box-direction

屬性：彈性盒模型對象的子元素的排列順序是否反轉。

取值：

normal：
設置彈性盒模型對象的子元素按正常順序排列
reverse：
反轉彈性盒模型對象的子元素的排列順序

Firefox設置box-direction爲reverse時，在將元素的排列順序反轉的同時也將元素的對齊方式逆轉了；Safari和Chrome則只是反轉元素排列順序。

此屬性效果：

以上就是彈性盒模型涉及到的一些屬性，還有一些屬性因爲用法不明確或兼容性問題本文就暫不作介紹了。

特此聲明：本文全部實例代碼皆以webkit爲基礎，如用其餘瀏覽器測試，請自主改下內核前綴。

參考資料：W3CHTML

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。