溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
介紹
在css2當中，存在標準模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的布局方案。彈性盒子模型是css3中新提出的一種布局方案。是一種為了應對針對不同屏幕寬度不同設備的一整套新的布局方案。主要是對一個容器中的子元素進行排列、對齊和分配空白空間的方案的調整。
新舊版本的彈性盒子模型
在之前，css3曾經推出過舊版本的彈性盒子模型。相對于新版本的彈性盒子模型而言，舊版本的內容與新版本還是有些出入。而且，從功能上來講，舊版本的彈性盒子模型遠遠沒有新版本的盒子模型強大，從兼容性來講，二者在pc端ie9以下都存在著兼容性問題，但是在移動端，舊版本的彈性盒子模型兼容性則更好一點。但是對于我們來說，我們依然要將主要的精力放在新版本的彈性盒子模型的身上，因為舊版本的彈性盒子模型淘汰是必然，隨著手機端的兼容性逐漸提升，舊版本必將被淘汰。另外，新版本具有更加強大的功能，也值得我們進行深度的學習。那么我們對于新舊兩個版本的彈性盒子模型，我們只需要抱著對比的心態學習即可，掌握新版本，了解舊版本，這樣即使有一天我們需要使用舊版本，也可以非常容易的學習舊版本的彈性盒子模型。
相關概念
我們以元素排在一行為例，當元素排列在一行的時候，主軸既表示元素排列的方向，橫向排列則主軸即可以理解為一條橫線，又因為我們元素默認是從左向右排列，那么我們可以說在默認的情況下，元素的主軸的起始位置是在左，而方向為右，終點也為右。
元素垂直的方向即為側軸。默認上為起點，下為終點。
我們想要使用彈性盒子模型，就需要將容器轉換為彈性容器，我們說一個包含于子元素的容器設置了display:flex，那么這個容器也就變成了彈性容器。
當子元素的父元素變成了彈性容器，那么其中的所有的子元素也自然而然的變成了彈性子元素。
如何創建一個彈性容器：
display:flex | inline-flex彈性容器屬性
彈性容器中子元素的排列方式(主軸排列方式)
屬性值：
row:默認在一行排列
row-reverse:反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。）
column：縱向排列。
column-reverse：反轉縱向排列，從下往上排，最后一項排在最上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction</title>
<style>
html,body {
margin:0;
padding:0;
}
nav {
height: 500px;
background-color: lightcyan;
display: flex;
flex-direction: row-reverse;/*居左1234 變成居右4321*/
flex-direction: column;/*居左1234變成上下1234*/
flex-direction: column-reverse;/*變成下上1234*/
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<nav>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
</nav>
</body>
</html>
專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和需要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）設置彈性盒子的子元素超出父容器時是否換行
屬性值：
nowrap: 默認值。規定元素不拆行或不拆列。
wrap:規定元素在必要的時候拆行或拆列。
wrap-reverse:規定元素在必要的時候拆行或拆列，但是以相反的順序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*設置了屬性為wrap，那么一行放不下的時候會自動的去下一行*/
/*flex-wrap:wrap;*/
/*設置了屬性為wrap-reverse會讓排序發生一個反轉，雖然同樣是多行，但是會變成從下到上*/
flex-wrap: wrap-reverse;
}
.box div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<!--此時元素如果不換行，那么當一行的整體放不下時，每個元素就會相應的縮小-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>flex-direction 和 flex-wrap 的簡寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
flex-flow: row wrap;
}
.box div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<!--此時元素如果不換行，那么當一行的整體放不下時，每個元素就會相應的縮小-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
相關屬性值：
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-item</title>
<style>
.box {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*默認 側軸起點橫向排列*/
/*align-items: flex-start;*/
/*側軸終點橫向排列*/
/*align-items: flex-end;*/
/*側軸終點橫向排列*/
/*align-items: center;*/
align-items: baseline;
}
.box div{
width: 100px;
height: 100px;
background-color: lightsalmon;
text-align: center;
line-height: 100px;
font-weight: bold;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊(行與行的對其方式).
相關屬性：
flex-start： 沒有行間距
flex-end： 底對齊沒有行間距
center ：居中沒有行間距
space-between：兩端對齊，中間自動分配
space-around：自動分配距離
請注意本屬性在只有一行的伸縮容器上沒有效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-content</title>
<style>
nav {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*開啟多行*/
flex-wrap: wrap;
/*側軸起點上下兩行對齊，沒有行間距*/
/*align-content: flex-start;*/
/*側軸終點上下兩行對齊，沒有行間距，第一行依然在上*/
/*align-content: flex-end;*/
/*側軸終點對齊，第一行依然在上，沒有行間距*/
/*align-content:center;*/
/*兩端對齊，中間自動分配*/
/*align-content: space-between;*/
/*自動分配距離*/
align-content:space-around;
}
nav div {
width: 100px;
height: 100px;
background-color: lightcoral;
margin:10px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</nav>
</body>
</html>設置彈性盒子元素在主軸（橫軸）方向上的對齊方式
相關屬性：
flex-star：t默認，頂端對齊
flex-end：末端對齊
center：居中對齊
space-between：兩端對齊，中間自動分配
space-around：自動分配距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
nav {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*justify-content: flex-start;*/
/*主軸對齊，貼右 1234*/
/*justify-content: flex-end;*/
/*主軸對齊，居中*/
/*justify-content: center;*/
/*兩端對齊，中間自動分配*/
/*justify-content: space-between;*/
/*自動分配距離*/
justify-content: space-around;
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
margin:10px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</nav>
</body>
</html>
專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和需要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）彈性子元素屬性
設置彈性盒子的子元素排列順序。 number排序優先級，數字越大越往后排，默認為0，支持負數。
設置或檢索彈性盒子元素的擴展比率。
設置或檢索彈性盒子元素的收縮比率。
用于設置或檢索彈性盒伸縮基準值
設置彈性盒子的子元素如何分配空間,是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性
在彈性子元素上使用。覆蓋容器的 align-items 屬性。值與容器屬性一樣，只是這個是單獨的設置某個元素。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
