CSS3彈性盒子(Flexbox)模型布局

SS3彈性布局

CSS3彈性布局(Flexible Box 或 Flexbox)是指通過調整其內元素的寬高，從而在任何顯示設備上實現對可用顯示空間最佳填充的能力。彈性容器擴展其內元素來填充可用空間，或將其收縮來避免溢出。
塊級布局(block)更側重于垂直方向、行內布局(inline)更側重于水平方向，與此相對的，彈性盒子布局算法是方向無關的。特別適用于支持那些必須隨用戶代理(user agent)不同或設備方向從水平轉為垂直等各種變化而變換方向、調整大小、拉伸、收縮的應用程序組件。

Flexbox布局中的概念

1.彈性容器

display 的值為flex或者inline-flex就是一個彈性容器

2.彈性項目

彈性容器的子項就是彈性項目

3.軸

彈性布局中有兩條軸,彈性項目沿其依次排列的那根軸稱為主軸(main axis)。

垂直于主軸的那根軸稱為側軸(cross axis)

用flex-direction來定義主軸

flex-direction:row 表示橫向為主軸,從左到右
flex-direction:row-reverse 橫向為主軸,從右到左
flex-direction:column 從上到下為主軸
flex-direction:column-reverse 從下到上為主軸

用justify-content來定義沿主軸怎么排列

用align-items定義彈性項目沿側軸默認如何排布

用align-self定義單個彈性項目沿側軸應當如何對齊

4.尺寸:

用flex-grow定義拉伸因子,相當于權重,數字越大占空間越大,負數無效

用flex-shrink定義彈性元素的收縮規則,數字越大收縮的越厲害.負數無效

用flex-basis 指定彈性元素在主軸方向上的初始大小

布局示例

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: row;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 border: 1px solid white;
 }
 #container div:nth-of-type(1) {flex-grow:1}
 #container div:nth-of-type(2) {flex-grow: 4;}
 #container div:nth-of-type(3) {flex-grow: 1;}
</style>
</head>
<body>
<div id="container">
 <div class="item">彈性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

橫向排列,第二個彈性元素拉伸因子最大

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: column-reverse;
 height: 50vh;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 border: 1px solid white;
 }
 #container div:nth-of-type(1) {flex-grow:1}
 #container div:nth-of-type(2) {flex-shrink: 4;}
 #container div:nth-of-type(3) {flex-grow: 1;}
</style>
</head>
<body>
<div id="container">
 <div class="item">彈性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

縱向反序排列,第二個彈性元素收縮因子最大

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: row;
 justify-content:space-around;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 width: 150px;
 border: 1px solid white;
 }
 
</style>
</head>
<body>
<div id="container">
 <div class="item">彈性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

沿主軸分散排列

<!DOCTYPE html>
<html>
<head>
 <style>
 #container{
 display: flex;
 flex-direction: row;
 justify-content:center;
 height: 50vh;
 background-color: burlywood;
 }
 .item {
 background:#f0ad4e;
 text-align: center;
 height:100px;
 width: 100px;
 border: 1px solid white;
 }
 #container div:nth-of-type(1) {align-self:center}
 
</style>
</head>
<body>
<div id="container">
 <div class="item">彈性</div>
 <div class="item">布局</div>
 <div class="item">示例</div>
</div>
</body>
</html>

所有元素沿主軸居中,第一個彈性元素沿側軸居中

瞅啥？

有沒有想過？一直從事流水線操作的你，或許在編程中的流程控制方面天賦異稟。有沒有想過？一直以來左右逢源的你，或許也能靠手中的鍵盤做點大事？有沒有想過？平時好像平淡無奇的你，或許身上埋藏了“程序員”的驚奇骨骼。

或者，也許你并沒有！那么跟我一起動手試試就知道了！

不扯淡，上干貨！

我們要做的成果展示（輪播圖）：

菜單（需要的材料）：

html語言（處理頁面結構）
css語言（美化頁面）
javaScript語言（讓頁面動起來）

我們分別用3大模塊來單獨實現，做這個就別想那個

編寫頁面骨架html

我們在某個文件夾內點擊鼠標右鍵，新建一個文本文件,像這樣
接著我們在里面編寫如下代碼
標簽有單、雙之分，雙標簽以</標簽名>為結束，標簽內的標簽是裝在里面的東西
下面的結構是yong_hu_kan包含lun_bo_tu_he_zi
<html>

<head>

<title>這是我的輪播圖頁面喲</title>

</head>

<body>

<div id="yong_hu_kan">

<div id="lun_bo_tu_he_zi">

</div>

</div>

</body>

</html>

接著在里面放入3組
盒子+圖片（http的那個是圖片地址，不要去手抄喲）
<div>
<img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
</div>
<div>
<img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmesH11iotzh7lM0G292gt2X2cmdsxkgO5bl2O4yRGf9GN2HWz.D661rMtBCu5EbBQAwjheXdpWZllS6w9itABFIM!/b&bo=yADIAAAAAAACFzM!&rf=viewer_4">
</div>
<div>
<img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
</div>
接著運行程序，最簡單的方法就是把剛才的編寫的文件用鼠標左鍵托到瀏覽器中再放手,如無意外，你將看到

兄嘚,那么你的html頁面就完成了

CSS美化一下

敲黑板了！

在head標簽中加入如下代碼，設置他們的寬高
<style>
#yong_hu_kan {
width:200px;
height:200px;
}
#lun_bo_tu_he_zi {
width:600px;
height:200px;
}
</style>
讓圖片橫著排列 ,那就讓luo_bo_tu_he_zi 里面的3個div都向左漂浮就好,繼續在style標簽中加入如下代碼
#lun_bo_tu_he_zi div {
float:left;
}
好了，記得Ctrl + S 鍵來保存一下，保存以后，把文件丟到瀏覽器中，你將看到：
接下來還有一個障礙要掃清（別問為什么，我太難了）
接著我們在style標簽中加入
body { margin:0px; }

至此CSS美化就搞定！！！

JavaScript篇

這一篇呢，想比之前的會難一些，出現的知識盲點也是無法避免的，由于篇幅有限，你只用知道有什么用、怎么用就好了

先來個熱場，在body標簽的結束標簽上方編寫

首先我們先分析一下，咱們現在3張圖應該都橫向排列了，那么接下來分解一下任務，代碼寫到script標簽里面：

獲取已經設置600px寬度的lun_bo_tu_he_zi盒子（內有3組div+img）
var ele=document.getElementById('lun_bo_tu_he_zi')
讓圖1向左移動，出現圖2，再向左移動，出現圖3
ele.style.left=ele.offsetLeft - 200 + 'px';
以上代碼的意思是描述位置：設置有多靠左=現在有多靠左 - 200（圖片寬）拼接 'px'
每次的移動需要間隔1秒再移動（代碼是固定格式）
setInterval(function() {
// 你要做的是
},1000)
目前設置了盒子的left屬性，盒子還不能移動，原因是默認布局方式類似擺貨架，左邊是墻壁，沒法讓其往左邊移動，因此我們給他設置絕對定位，就可以隨處飛，甚至飛出屏幕外。
那么來吧，理解了就往下寫
ele.style.position='absolute';
ele.style.left='0px';
第一，設置絕對定位就可以隨便飛absolute（絕對的意思）。第二，設置一個它開始的left位置為墻壁靠邊邊（道理類似與有始有終）
整理一下，現在咱們的代碼是這樣的（//是注釋，不影響程序運行，僅僅讓人能看懂代碼
<style>
// 獲取盒子
var ele=document.getElementById('lun_bo_tu_he_zi');
// 讓它飛
ele.style.position='absolute';
// 設置從哪飛
ele.style.left='0px';
// 每隔一秒做什么事
setInterval(function () {
// 設置它有多靠左=現在有多左 - 200 拼接'px'
ele.style.left=ele.offsetLeft - 200 + 'px';
},1000)
</style>

好了，接下來可以看效果了,記得保存文件和刷新瀏覽器

修修補補

哎喲哎喲，剛才發現圖怎么移動就都沒了？

究其原因就是我們沒有控制他什么時候回到初始繼續滾動

接下來問題來了，那么第三步應該干嘛？還向左繼續移動嗎？那不就啥也沒有了！！因此我們需要讓他回到起點，即：設置left=0px; 還繼續后續的移動，我們將代碼修改成如下：

setInterval(function () {
// 如果滿足（）里面的條件就執行后續，否則執行else
if (ele.offsetLeft <=-400) {
// 設置它有多靠左='0px'
ele.style.left='0px';
} else {
// 設置它有多靠左=現在有多左 - 200 拼接'px'
ele.style.left=ele.offsetLeft - 200 + 'px';
}
},1000)

現在再好了，接下來就是美化的事了：

3個圖片同時出現不好看，我們需要出現一個，則需要把隨著盒子不斷向左移動而超出
盒子的內容隱藏掉。我們用css給它設置3個樣式
#yong_hu_kan {
overflow: hidden;
position: relative;
}
第一個屬性是超出部分隱藏，第二個屬性是由于我們之前設置絕對定位是起飛，因此讓頁面不在知道盒子之間的包含關系了，因此我們這里聲明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的關系
再來加個慢慢過渡的效果
針對那個元素？回答：#lun_bo_tu_he_zi
哪一個屬性的改變需要過渡？回答：left
過渡時間放緩，需要幾秒完成？回答：1s
#lun_bo_tu_he_zi {
transition:left 1s;
}

搞定！看效果

寫在最后

哎喲，累死了，因為有些知識存在盲區，所以講解的時候幾乎都是左顧右盼來講解的，最后希望大家都能通過這個案例對于前端有一定的興趣，我是武漢人，希望大家能借著這次疫情明白，荒年餓不死手藝人的道理，也希望大家可以多學習，少追星。。。另外：有需要源碼或者做到一半不會做的同學可以想辦法聯系我，因為不能發第三方的聯系方式，所以一般都是關注+私信之類的來聯系了

天我們學習的內容有：過渡，動畫，轉換，伸縮盒子。

可以說今天學習的內容都是重量級的大佬，學好了，使用css3做出酷炫的效果 So Easy！~~

1.過渡

在css3中，有一個屬性可以設置過渡效果。

它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。

A.案例：通過transition設置焦點過渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意頁面中的代碼：

第一，我們給div添加了一個hover偽類樣式，當我們鼠標懸停在div上方的時候，會給div盒子添加一個藍色的盒子陰影。

第二，我們給div盒子添加了一個transition樣式，設置的值為：all 1s linear 0.3s;

這四個數據分別對應

transition-property(需要過渡的屬性)：如果設置為all表示所有樣式屬性都需要過渡。

transition-duration(過渡的時間):以秒作為單位，設置過渡的時間

transition-timing-function(過渡的方式):常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延遲的時間):以秒作為單位進行延遲，延遲之后開始進行過渡效果。

所以，我們通過transition這個復合屬性設置的過渡效果為：

all:需要過渡所有的屬性

1s:過渡的時間為1秒

linear:勻速過渡

0.3s:在延遲0.3秒之后開始過渡動畫。

如果大家理解了上面的描述，那么也就不難理解咱們鼠標放到div上之后，為啥會慢慢出現藍色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。

2.動畫：

在學習完了過渡之后，發現咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現一些過渡的動畫。

但是，有的時候，我們的需求會更加的復雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復雜的效果呈現。

那么，動畫animation就可以滿足我們的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代碼效果如下：

同樣，讓我們來關注編寫的代碼：

1.在樣式中，首先我們使用@keyframes 來定義了一個復雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：

/*動畫的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*動畫最初的時候，將left設置為0px，top設置為0px*/

0%{

left:0px;

top:0px;

}

/*當動畫進行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，

背景顏色過渡為綠色，圓角過渡為0(無圓角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*當動畫進行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，

背景顏色過渡為藍色，圓角過渡為50%(正圓)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*當動畫進行到75%的時候，使用動畫將left過渡到400px，top過渡到0，

背景顏色過渡為灰色，圓角過渡為0(無圓角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*當動畫結束的時候，使用動畫將left過渡到0x，top過渡到0px，

背景顏色過渡為紅色，圓角過渡為50%(正圓)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

這是一個比較復雜的動畫效果，可以發現，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當我們采用該動畫的元素就會按照設置的順序和樣式效果進行動畫的過渡和展示。

2.上面我們只是通過@keyframes創建了一個動畫，我們還需要通過特定的語法來使用這個動畫。

就是下面這句代碼了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一個復合屬性，設置了6個值，分別對應：

animation-name(設置動畫的名稱)：用來設置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創建的動畫。

animation-duration(設置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒

animation-timing-function(設置播放動畫的方式)：播放動畫的方式，常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。

animation-delay(設置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。

animation-iteration-count(設置動畫播放的次數):播放動畫的次數，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數字，那么就會播放數字對應的次數。

animation-direction(設置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是

alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。

最終，我們通過@keyframes創建動畫，通過animation設置動畫，成功完成了這個復雜的動畫效果。

3.轉換

在css3中，我們通過transform屬性可以設置元素的轉換效果，具體的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子的位置是left:0,top:0;

但是我們通過transform: translate(300px,300px);將盒子進行了偏移，所以，盒子的位置發生了改變。

B.旋轉

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子應該是四四方方的。

但是，經過我們的代碼transform: rotate(45deg); //deg為單位，表示度數。

進行了45度的旋轉之后，呈現出來的就是一個菱形的盒子了，旋轉的正方向為順時針，負方向為逆時針。

C.縮放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進行的縮放

scale的第一個參數為0.5,表示橫向縮小為0.5倍

scale的第二個參數為0.25，表示縱向縮小為0.25倍。

scale的參數如果為1，則表示不進行任何縮放，小于1就是做縮小，而大于1表示做放大。

小結：transform轉換中其實還包含了skew(傾斜)，matrix(矩陣轉換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。

4.flex布局

Flex布局，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代碼效果如下：

如圖所示，咱們通過display:flex將.parent元素設置為了flex盒子，那么子元素將會按照justify-content設置的方式進行元素的排列，目前看來，和我們沒有設置flex盒子的效果是一致的。

接下來我們更改一下，將justify-content設置為flex-end，效果如下圖所示：

所以我們就應該發現，flex-start是讓所有的子元素從父元素的左側開始排列

而flex-end是讓所有的子元素從元素的右側開始排列。

我們再來更改一下，將justify-content設置為center，效果如下圖所示：

更厲害了，子元素在父盒子的中央位置排列顯示了。

然后，我們再將justify-content設置為space-around，效果如下圖所示：

它是平均分配的形式為每一個子元素設置了間距，但是看起來有點變扭。

所以我們推薦將justify-content設置為space-between，效果如下圖：

我們還可以通過flex-wrap來設置子元素是否換行顯示，以及flex-direction設置子元素排列的順序。

這兩個屬性可以設置的值如下：

flex-wrap: nowrap;//不換行，會自動收縮

flex-wrap: warp;//換行，會自動收縮

flex-wrap: warp-reverse;//反轉，從默認的從上到下排列反轉為從下到上。

flex-direction:row; //從左至右一行一行進行子元素的排列

flex-direction:column; //從上到下一列一列進行子元素的排列

flex-direction:row-reverse; //從右至左一行一行進行子元素的排列

flex-direction:column-reverse; //從下到上一列一列進行子元素的排列

案例代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我們設置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）

代碼效果如下：

如果設置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：

如果將flex-direction: column;,則會縱向排列元素，效果如下圖：

除了上面的這些給伸縮盒子父元素設置的樣式之外，我們還可以可以伸縮盒子的子元素設置flex屬性，用來設置平均分配整個父盒子的空間。

代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現在被拉伸了。

除此之外，咱們還可以使用flex屬性進行進一步的設置，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下圖：

我們分別給四個子盒子設置了flex:1 , flex:2, flex:2 ,flex:1.

這是什么意思呢？

四個flex加起來一共是6.那么第一個盒子就占據整個父盒子的1/6寬度。

同理，另外三個盒子分別占據2/6,2/6,1/6的寬度，所以就形成了我們現在看到的效果。

原文來源于：黑馬程序員社區

學習資源：

想學習css，可以關注：黑馬程序員頭條號，后臺回復：css

在線咨詢

上一篇：UI培訓：蕪湖北大青鳥UI培訓怎么樣
下一篇：織夢dedecms網站微信支付接口開發流程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS3彈性盒子(Flexbox)模型布局

Flexbox布局中的概念

布局示例

您的項目需求