CSS3菜鳥(niǎo)教程
CSS3 彈性盒子布局
CSS3 flexible Box或flexbox是用于創(chuàng)建更靈活的用戶界面設(shè)計(jì)的新布局模型。
了解Flex布局模型
Flexible box，通常稱(chēng)為flexbox，是CSS3中引入的一種新的布局模型，用于創(chuàng)建具有多行和多列的靈活用戶界面設(shè)計(jì)，而不使用百分比或固定長(zhǎng)度值。CSS3 flex布局模型提供了一種簡(jiǎn)單而強(qiáng)大的機(jī)制，可以通過(guò)樣式表自動(dòng)處理空間分布和內(nèi)容對(duì)齊，而不會(huì)干擾實(shí)際的標(biāo)記。
以下示例演示如何使用flex布局模型創(chuàng)建三列布局，其中每一列的寬度和高度均相等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
border: 1px solid #808080;
}
.flex-container div {
background: #dbdfe5;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
</style>
</head>Item 1Item 2Item 3</html>測(cè)試看看?/?如果您仔細(xì)注意上面的示例代碼，您會(huì)發(fā)現(xiàn)我們沒(méi)有在.flex-container的內(nèi)部<div>上指定任何寬度，但是您可以在輸出中看到，每一列的寬度正好等于父元素.flex-container的三分之一。
Flex布局如何工作
Flexbox由Flex容器和Flex項(xiàng)目組成?？梢酝ㄟ^(guò)將display元素的屬性設(shè)置為flex（生成塊級(jí) Flex容器）或inline-flex（生成類(lèi)似于inline-block的內(nèi)聯(lián)Flex容器）來(lái)創(chuàng)建Flex容器。flex容器的所有子元素將自動(dòng)成為flex項(xiàng)目，并使用flex布局模型進(jìn)行布局。的float，clear和vertical-align性質(zhì)有彈性的項(xiàng)目沒(méi)有影響。
伸縮項(xiàng)沿著該flex-direction屬性指定的伸縮線位于伸縮容器內(nèi)。默認(rèn)情況下，每個(gè)flex容器只有一條彈性線，其方向與當(dāng)前書(shū)寫(xiě)模式的內(nèi)聯(lián)軸或文本方向相同。下圖將幫助您了解Flex布局術(shù)語(yǔ)。
指定Flex容器內(nèi)部的流
在標(biāo)準(zhǔn)的CSS框模型中，元素通常按照它們?cè)诘讓親TML標(biāo)記中出現(xiàn)的順序顯示。Flex布局允許您控制一個(gè)Flex容器內(nèi)的流的方向，這樣一來(lái)，元素就可以按照向左、向右、向下甚至向上的任何流方向進(jìn)行布局。
可以使用flex-direction屬性指定flex容器中的flex項(xiàng)目流。此屬性的默認(rèn)值row與文檔的當(dāng)前書(shū)寫(xiě)模式或文本方向相同，例如，英語(yǔ)從左到右。
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
border: 1px solid #666;
}測(cè)試看看?/?類(lèi)似地，您可以在彈性容器內(nèi)以列形式顯示彈性項(xiàng)，而不是使用flex-direction屬性的值列行，如下所示：
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}測(cè)試看看?/?控制伸縮項(xiàng)的尺寸
彈性布局的最重要方面是彈性項(xiàng)目改變其寬度或高度以填充可用空間的能力。這是通過(guò)flex屬性實(shí)現(xiàn)的。這是速記屬性flex-grow，flex-shrink而flex-basis屬性。
彈性容器將可用空間與其彈性生長(zhǎng)因子成正比地分布到其項(xiàng)目，或收縮它們以防止溢出與其彎曲收縮系數(shù)成比例。
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
padding: 10px;
background: #dbdfe5;
}
.item1, .item3 {
-webkit-flex: 1; /* Safari */
flex: 1;
}
.item2 {
-webkit-flex: 2; /* Safari */
flex: 2;
}測(cè)試看看?/?在上面的示例中，第一個(gè)和第三個(gè)伸縮項(xiàng)目將占用1/4，即1/(1+1+2)的自由空間，而第二個(gè)伸縮項(xiàng)目將占用1/2，即2/(1+1+2)的自由空間。類(lèi)似地，您可以使用這個(gè)簡(jiǎn)單的技術(shù)創(chuàng)建其他靈活的布局。
注意：強(qiáng)烈建議使用速記屬性，而不是單獨(dú)的flex屬性，因?yàn)樗梢哉_重置未指定的組件。
在Flex容器中對(duì)齊Flex項(xiàng)目
有四個(gè)屬性justify-content，align-content，align-items和align-self其目的是為了指定彈性容器內(nèi)的彈性項(xiàng)目的對(duì)準(zhǔn)。其中的前三個(gè)適用于flex容器，而最后一個(gè)適用于單個(gè)flex項(xiàng)目。
沿主軸對(duì)齊Flex項(xiàng)目
使用justify-content屬性，可以將伸縮項(xiàng)沿伸縮容器的主軸（即在水平方向上）對(duì)齊。通常在彈性項(xiàng)目未使用主軸上所有可用空間的情況下使用。
justify-content屬性接受以下值：
flex-start-默認(rèn)值。彈性項(xiàng)目放置在主軸的起點(diǎn)。
flex-end -Flex項(xiàng)目位于主軸的末端。
center - Flex的項(xiàng)目放置在主軸線的與等量的自由空間在兩端的中心。如果剩余的自由空間為負(fù)，即項(xiàng)目溢出，則彈性項(xiàng)目將在兩個(gè)方向上均等溢出。
space-between -的Flex項(xiàng)都沿著主軸線，其中第一項(xiàng)放置在主起始沿和最后一個(gè)放置在主端均勻地分布。如果項(xiàng)目溢出或只有一項(xiàng)，則此值等于flex-start。
space-around -Flex項(xiàng)在兩端均以一半大小的空間均勻分布。如果它們溢出或只有一項(xiàng)，則此值等于center。
下面的示例將向您展示不同justify-content屬性值對(duì)具有固定寬度的多列flex容器的影響。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}
.item1 {
width: 75px;
background: #e84d51;
}
.item2 {
width: 125px;
background: #7ed636;
}
.item3 {
width: 175px;
background: #2f97ff;
}測(cè)試看看?/?沿橫軸對(duì)齊Flex項(xiàng)目
可以使用align-items或align-self屬性沿Flex容器的橫軸（即垂直方向）對(duì)齊Flex項(xiàng)目。但是，在將align-items應(yīng)用于flex容器時(shí)，該align-self屬性將應(yīng)用于單個(gè)flex項(xiàng)目，并覆蓋align-items。這兩個(gè)屬性均接受以下值：
flex-start — Flex項(xiàng)目位于交叉軸的起點(diǎn)。
flex-end — Flex項(xiàng)目位于交叉軸的末端。
center —伸縮項(xiàng)放置在橫軸的中心，兩端具有相等的可用空間。如果剩余的自由空間為負(fù)，即項(xiàng)目溢出，則彈性項(xiàng)目將在兩個(gè)方向上均等溢出。
baseline —每個(gè)彈性項(xiàng)目的文本基準(zhǔn)（或內(nèi)聯(lián)軸）與最大的彈性項(xiàng)目的基線對(duì)齊font-size。
Stretch —伸縮項(xiàng)目將拉伸以填充當(dāng)前行或列，除非由最小和最大寬度或高度阻止。align-items屬性的默認(rèn)值。
以下示例將向您展示不同align-items屬性值對(duì)具有固定高度的多列flex容器的影響。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
}
.item1 {
width: 75px;
height: 100px;
background: #e84d51;
}
.item2 {
width: 125px;
height: 200px;
background: #7ed636;
}
.item3 {
width: 175px;
height: 150px;
background: #2f97ff;
}測(cè)試看看?/?您還可以在多行或多列flex容器的橫軸上分配可用空間。該屬性align-content用于對(duì)齊flex容器的行，例如，如果橫軸上有多余的空間，則將多行flex容器中的行justify-content對(duì)齊，類(lèi)似于將單個(gè)項(xiàng)目對(duì)齊主軸。
該align-content屬性接受與相同的值justify-content，但將其應(yīng)用于橫軸而不是主軸。它還接受另一個(gè)價(jià)值：
Stretch可用空間在所有行或列之間平均分配，以增加其交叉大小。如果剩余的自由空間為負(fù)，則此值等于flex-start。
以下示例將向您展示不同align-content屬性值對(duì)具有固定高度的多行flex容器的影響。
.flex-container {
width: 500px;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.flex-container div {
width: 150px;
height: 100px;
background: #dbdfe5;
}測(cè)試看看?/?重新排序各個(gè)Flex項(xiàng)目
除了更改flex容器內(nèi)的流之外，您還可以更改使用order屬性顯示單個(gè)flex項(xiàng)的順序。此屬性接受正整數(shù)或負(fù)整數(shù)作為值。默認(rèn)情況下，所有的flex項(xiàng)目都是按照它們?cè)贖TML標(biāo)記中出現(xiàn)的順序顯示和布局的，因?yàn)閛rder默認(rèn)值是0。
以下示例將向您展示如何指定單個(gè)彈性項(xiàng)目的順序。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.flex-container div {
padding: 10px;
width: 130px;
}
.item1 {
background: #e84d51;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
background: #7ed636;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
background: #2f97ff;
-webkit-order: -1; /* Safari 6.1+ */
order: -1;
}測(cè)試看看?/?注意：具有最低階值的項(xiàng)目放在最前面，而具有最高階值的項(xiàng)目放在最后。具有相同order值的項(xiàng)目將按照它們?cè)谠次臋n中出現(xiàn)的順序顯示。
Flexbox的水平和垂直中心對(duì)齊
通常，內(nèi)容塊的垂直對(duì)齊涉及使用JavaScript或一些簡(jiǎn)陋的CSS技巧。但是，使用flexbox可以輕松進(jìn)行此操作，而無(wú)需進(jìn)行任何調(diào)整。
以下示例將向您展示如何使用CSS3靈活框功能輕松地在中間將內(nèi)容塊垂直和水平對(duì)齊。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.item {
width: 300px;
padding: 25px;
margin: auto;
background: #f0e68c;
}測(cè)試看看?/?啟用彈性項(xiàng)目換行
默認(rèn)情況下，彈性容器僅顯示彈性項(xiàng)目的單行或單列。但是flex-wrap如果在一條伸縮行上沒(méi)有足夠的空間，則可以使用flex容器上的屬性來(lái)指定其伸縮項(xiàng)是否換成多行。
該flex-wrap屬性接受以下值：
nowrap-默認(rèn)值。伸縮項(xiàng)目放在一行中。如果伸縮線上沒(méi)有足夠的空間，則可能會(huì)導(dǎo)致溢出。
wrap — flex容器將其flex項(xiàng)目分解為多行，類(lèi)似于文本太寬而無(wú)法容納在當(dāng)前行上時(shí)如何將其分解到新行上。
wrap-reverse —伸縮項(xiàng)目將在必要時(shí)進(jìn)行換行，但順序相反，即，交叉起點(diǎn)(cross-start)和交叉終點(diǎn)(cross-end)方向會(huì)互換。
以下示例將向您展示如何使用flex-wrap屬性在flex容器中的一行或多行中顯示flex項(xiàng)目。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.flex-container div{
width: 130px;
padding: 10px;
background: #dbdfe5;
}測(cè)試看看?/?注意：您還可以使用簡(jiǎn)寫(xiě)CSS屬性在單個(gè)聲明中flex-flow設(shè)置flex-direction和flex-wrap。它接受與各個(gè)屬性相同的值，并且值可以為任意順序。