web前端入門(mén)到實(shí)戰(zhàn)：CSS3中的彈性盒子模型
介紹
上高網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),上高網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為上高超過(guò)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的上高做網(wǎng)站的公司定做！
在css2當(dāng)中，存在標(biāo)準(zhǔn)模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當(dāng)中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強(qiáng)大的、靈活的布局方案。彈性盒子模型是css3中新提出的一種布局方案。是一種為了應(yīng)對(duì)針對(duì)不同屏幕寬度不同設(shè)備的一整套新的布局方案。主要是對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間的方案的調(diào)整。
新舊版本的彈性盒子模型
在之前，css3曾經(jīng)推出過(guò)舊版本的彈性盒子模型。相對(duì)于新版本的彈性盒子模型而言，舊版本的內(nèi)容與新版本還是有些出入。而且，從功能上來(lái)講，舊版本的彈性盒子模型遠(yuǎn)遠(yuǎn)沒(méi)有新版本的盒子模型強(qiáng)大，從兼容性來(lái)講，二者在pc端ie9以下都存在著兼容性問(wèn)題，但是在移動(dòng)端，舊版本的彈性盒子模型兼容性則更好一點(diǎn)。但是對(duì)于我們來(lái)說(shuō)，我們依然要將主要的精力放在新版本的彈性盒子模型的身上，因?yàn)榕f版本的彈性盒子模型淘汰是必然，隨著手機(jī)端的兼容性逐漸提升，舊版本必將被淘汰。另外，新版本具有更加強(qiáng)大的功能，也值得我們進(jìn)行深度的學(xué)習(xí)。那么我們對(duì)于新舊兩個(gè)版本的彈性盒子模型，我們只需要抱著對(duì)比的心態(tài)學(xué)習(xí)即可，掌握新版本，了解舊版本，這樣即使有一天我們需要使用舊版本，也可以非常容易的學(xué)習(xí)舊版本的彈性盒子模型。
相關(guān)概念
- 主軸
我們以元素排在一行為例，當(dāng)元素排列在一行的時(shí)候，主軸既表示元素排列的方向，橫向排列則主軸即可以理解為一條橫線，又因?yàn)槲覀冊(cè)啬J(rèn)是從左向右排列，那么我們可以說(shuō)在默認(rèn)的情況下，元素的主軸的起始位置是在左，而方向?yàn)橛?，終點(diǎn)也為右。
- 側(cè)軸
元素垂直的方向即為側(cè)軸。默認(rèn)上為起點(diǎn)，下為終點(diǎn)。
- 彈性容器
我們想要使用彈性盒子模型，就需要將容器轉(zhuǎn)換為彈性容器，我們說(shuō)一個(gè)包含于子元素的容器設(shè)置了display:flex，那么這個(gè)容器也就變成了彈性容器。
- 彈性子元素
當(dāng)子元素的父元素變成了彈性容器，那么其中的所有的子元素也自然而然的變成了彈性子元素。
如何創(chuàng)建一個(gè)彈性容器：
display:flex | inline-flex彈性容器屬性
- flex-direction
彈性容器中子元素的排列方式(主軸排列方式)
屬性值：
row:默認(rèn)在一行排列
row-reverse:反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。）
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從下往上排，最后一項(xiàng)排在最上面
<!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>
專(zhuān)門(mén)建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開(kāi)始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開(kāi)發(fā)學(xué)習(xí)路線以及規(guī)劃）- flex-wrap
設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行
屬性值：
nowrap: 默認(rèn)值。規(guī)定元素不拆行或不拆列。
wrap:規(guī)定元素在必要的時(shí)候拆行或拆列。
wrap-reverse:規(guī)定元素在必要的時(shí)候拆行或拆列，但是以相反的順序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*設(shè)置了屬性為wrap，那么一行放不下的時(shí)候會(huì)自動(dòng)的去下一行*/
/*flex-wrap:wrap;*/
/*設(shè)置了屬性為wrap-reverse會(huì)讓排序發(fā)生一個(gè)反轉(zhuǎn)，雖然同樣是多行，但是會(huì)變成從下到上*/
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">
<!--此時(shí)元素如果不換行，那么當(dāng)一行的整體放不下時(shí)，每個(gè)元素就會(huì)相應(yīng)的縮小-->
<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-flow
flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)
<!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">
<!--此時(shí)元素如果不換行，那么當(dāng)一行的整體放不下時(shí)，每個(gè)元素就會(huì)相應(yīng)的縮小-->
<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>- align-item
設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式
相關(guān)屬性值：
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-item</title>
<style>
.box {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*默認(rèn) 側(cè)軸起點(diǎn)橫向排列*/
/*align-items: flex-start;*/
/*側(cè)軸終點(diǎn)橫向排列*/
/*align-items: flex-end;*/
/*側(cè)軸終點(diǎn)橫向排列*/
/*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>- align-content
修改 flex-wrap 屬性的行為，類(lèi)似 align-items, 但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊(行與行的對(duì)其方式).
相關(guān)屬性：
flex-start： 沒(méi)有行間距
flex-end： 底對(duì)齊沒(méi)有行間距
center ：居中沒(méi)有行間距
space-between：兩端對(duì)齊，中間自動(dòng)分配
space-around：自動(dòng)分配距離
請(qǐng)注意本屬性在只有一行的伸縮容器上沒(méi)有效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-content</title>
<style>
nav {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*開(kāi)啟多行*/
flex-wrap: wrap;
/*側(cè)軸起點(diǎn)上下兩行對(duì)齊，沒(méi)有行間距*/
/*align-content: flex-start;*/
/*側(cè)軸終點(diǎn)上下兩行對(duì)齊，沒(méi)有行間距，第一行依然在上*/
/*align-content: flex-end;*/
/*側(cè)軸終點(diǎn)對(duì)齊，第一行依然在上，沒(méi)有行間距*/
/*align-content:center;*/
/*兩端對(duì)齊，中間自動(dòng)分配*/
/*align-content: space-between;*/
/*自動(dòng)分配距離*/
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>- justify-content
設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式
相關(guān)屬性：
flex-star：t默認(rèn)，頂端對(duì)齊
flex-end：末端對(duì)齊
center：居中對(duì)齊
space-between：兩端對(duì)齊，中間自動(dòng)分配
space-around：自動(dòng)分配距離
<!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;*/
/*主軸對(duì)齊，貼右 1234*/
/*justify-content: flex-end;*/
/*主軸對(duì)齊，居中*/
/*justify-content: center;*/
/*兩端對(duì)齊，中間自動(dòng)分配*/
/*justify-content: space-between;*/
/*自動(dòng)分配距離*/
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>
專(zhuān)門(mén)建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開(kāi)始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開(kāi)發(fā)學(xué)習(xí)路線以及規(guī)劃）彈性子元素屬性
- order
設(shè)置彈性盒子的子元素排列順序。 number排序優(yōu)先級(jí)，數(shù)字越大越往后排，默認(rèn)為0，支持負(fù)數(shù)。
- flex-grow
設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。
- flex-shrink
設(shè)置或檢索彈性盒子元素的收縮比率。
- flex-basis
用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值
- flex
設(shè)置彈性盒子的子元素如何分配空間,是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性
- align-self
在彈性子元素上使用。覆蓋容器的 align-items 屬性。值與容器屬性一樣，只是這個(gè)是單獨(dú)的設(shè)置某個(gè)元素。
當(dāng)前名稱(chēng)：web前端入門(mén)到實(shí)戰(zhàn)：CSS3中的彈性盒子模型
網(wǎng)站網(wǎng)址：http://muchs.cn/article16/ihsjdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、搜索引擎優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 企業(yè)建站需要策劃嗎？ 2022-04-30
- 漯河企業(yè)建站需要特別注意的6個(gè)方面 2021-10-06
- 自助建站網(wǎng)站模板 讓企業(yè)建站更輕松 2017-12-04
- 企業(yè)建站選擇模版建站的四個(gè)弊端 2015-01-01
- 淺析企業(yè)建站誤區(qū) 2022-06-01
- 企業(yè)建站網(wǎng)站規(guī)劃功能布局和板塊內(nèi)容 2020-04-01
- 提高網(wǎng)站用戶體驗(yàn)度是每個(gè)企業(yè)建站時(shí)必須要考慮的問(wèn)題 2022-05-07
- 【企業(yè)建站的目的】企業(yè)站建設(shè)的優(yōu)勢(shì)是什么？ 2016-11-19
- 企業(yè)建站細(xì)節(jié) 2021-10-06
- 【企業(yè)cms建站系統(tǒng)】哪個(gè)企業(yè)建站系統(tǒng)更有利于優(yōu)化 2016-11-19
- 企業(yè)建站需要幾步？ 2017-10-04
- 成都企業(yè)建站規(guī)劃需要考慮哪些問(wèn)題 2022-12-07