Flexbox簡(jiǎn)介
Flexbox Layout(Flexible Box)模塊估脆，W3C官方稱為CSS彈性盒子布局蝙斜，是在CSS3中定義的一種新的布局模式。Flexbox可以控制在容器內(nèi)的子元素的對(duì)齊方式、排列方式以及排序順序，即使其子元素的尺寸是未知或者動(dòng)態(tài)的情況下巍杈。彈性容器的主要特點(diǎn)就是能夠調(diào)整其子元素的寬度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空間。
Flexbox模型
上圖為flexbox的模型扛伍。對(duì)于一個(gè)flexbox筷畦，有以下幾點(diǎn)基本點(diǎn)需要關(guān)注：
- flex-container：flex容器。
- flex-item：flex元素刺洒。需要注意的是鳖宾，flex-item是相對(duì)flex-container的直接子元素，flex-item本身也可以成為其內(nèi)部元素的flex-container逆航。
- main axis：主軸鼎文，默認(rèn)為橫向且從左到右。
- cross axis：縱軸因俐，默認(rèn)為縱向且從上到下拇惋。
- main size：flex-item在主軸上的尺寸周偎。
- cross size：flex-item在縱軸上的尺寸。
接下來將以代碼演示的方式來初步學(xué)習(xí)flexbox蚤假。
Flexbox屬性
-
Flex-container：
對(duì)于容器而言栏饮，首先我們要開啟flexbox。
現(xiàn)在有這樣一段HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</div>
</body>
</html>
接下來磷仰，我們來為box開啟flexbox(為了易于表現(xiàn)，我們來加上一些樣式）境蔼。
.box {
background:lightgray;
display:flex;
}
.box1 {
width:100px;
height:100px;
border:1px solid red;
}
能夠發(fā)現(xiàn)的是灶平，當(dāng)容器成為flexbox后，flex-item立刻呈現(xiàn)了一個(gè)樣式箍土，如圖
原本應(yīng)該縱向塊狀排列的box1形成了類似
float:left的顯示效果逢享，同時(shí)容器的高度也未塌陷，不免贊嘆這個(gè)屬性如此優(yōu)雅吴藻。接下來我們來看對(duì)于一個(gè)flex-container瞒爬，有怎樣的屬性可以使用。1. flex-direction：
該屬性決定flex-item在容器內(nèi)的排列方向沟堡，有如下值：
.container{
flex-direction:row|row-reverse|column|column-reverse;//默認(rèn)值為row
}
- row：flex-item按主軸從左向右排列侧但。
- row-reverse：flex-item按主軸從右向左排列。
- column：flex-item按縱軸從上到下排列航罗。
- column-reverse：flex-item按縱軸從上到下排列禀横。
2. flex-wrap：
該屬性決定flex-item在容器內(nèi)的換行方式，有如下值：
.container {
flex-wrap:nowrap|wrap|wrap-reverse;//no-wrap為默認(rèn)值
}
下面都以flex-direction:row下演示粥血，其他顯示方向均類似柏锄。
- nowrap：不允許換行，flex-item會(huì)自適應(yīng)縮小寬度复亏。
- wrap：允許換行趾娃，flex-item以設(shè)定的寬度排列，換行后從左下方繼續(xù)排列缔御。
- wrap-reverse：允許換行抬闷，flex-item以設(shè)定的寬度排列，換行后從左上方繼續(xù)排列刹淌。
3. flex-flow：
該屬性是flex-direction和flex-wrap的簡(jiǎn)寫饶氏。
.contianer{
flex-flow: <flex-direction> || <flex-wrap>;//默認(rèn)值為row nowrap
}
4. justify-content：
該屬性決定flex-item的在容器內(nèi)橫軸上的對(duì)齊方式，有如下值：
.container {
justify-content:flex-start|flex-end|center|space-between|space-round;//默認(rèn)值為flex-start
}
下面都以flex-flow:row wrap;演示有勾。
- flex-start：以主軸開始方向?qū)R疹启。
- flex-end：以主軸結(jié)束方向?qū)R。（注意與row-reverse的區(qū)別）
- center：以主軸中央對(duì)齊蔼卡。
- space-around：各flex-item等間隔對(duì)齊喊崖，和容器接觸的元素與容器距離為flex-item間的一半挣磨。簡(jiǎn)單來講，flex-item的左右margin相等荤懂，且均分了容器主軸空間茁裙。
- space-between：以主軸兩端對(duì)齊，flex-item間距相等节仿。
關(guān)于這個(gè)屬性晤锥，需要注意的是和
flex-direction以及flex-wrap同時(shí)使用時(shí)會(huì)互相影響。5. align-items：
類似于justify-content廊宪，該屬性是flex-item在容器內(nèi)縱軸上的對(duì)齊方式矾瘾。
.container {
align-items:flex-start|flex-end|center|baseline|stretch;//stretch為默認(rèn)值
}
- flex-start：以縱軸開始方向?qū)R。
- flex-end：以縱軸結(jié)束方向?qū)R箭启。
- center：以縱軸居中對(duì)齊壕翩。
- baseline：以第一行文字基線對(duì)齊。
這里我們?cè)?號(hào)盒子中使用p標(biāo)簽包裹了數(shù)字傅寡，由于p標(biāo)簽的自帶屬性放妈，數(shù)字上方呈現(xiàn)了一定空間，這樣能夠更清楚的表現(xiàn)baseline的對(duì)齊方式荐操。
- stretch：flex-item在縱軸方向填滿整個(gè)容器芜抒。（當(dāng)flex-item的高度固定時(shí)，該屬性不生效）
這里我們?nèi)∠薴lex-item的固定高度淀零，將容器的高度設(shè)定為400px挽绩。
6. align-content：
該屬性設(shè)定當(dāng)多行對(duì)齊時(shí)，所在行對(duì)應(yīng)縱軸的對(duì)齊方式驾中。
.container {
align-content:flex-start|flex-end|center|stretch|space-between|space-around;//stretch為默認(rèn)值
}
這里為了便于表示唉堪，我們給容器設(shè)定了固定寬高為500px。
- flex-start：以縱軸開始方向?qū)R肩民。
- flex-end：以縱軸結(jié)束方向?qū)R唠亚。
- center：以縱軸居中對(duì)齊。
- stretch：縱軸方向填滿整個(gè)容器持痰。
這里我們?nèi)∠薴lex-item的高度以體現(xiàn)效果灶搜。
實(shí)際上，當(dāng)我們?yōu)閒lex-item加上固定高度就會(huì)發(fā)現(xiàn)工窍，該屬性是將容器高度等分割卖，將各行按等分線對(duì)齊。
- space-around：縱軸等間距對(duì)齊患雏。
- space-between：縱軸兩端對(duì)齊鹏溯。
注：之前我們所講到的主軸和縱軸，都是以默認(rèn)情況淹仑，也就是flex-direction:row情況下討論的丙挽。而當(dāng)flex-direction:column或flex-direction:column-reverse時(shí)肺孵，此時(shí)主軸變?yōu)榭v向，縱軸變?yōu)闄M向颜阐，所以其他屬性的表現(xiàn)會(huì)相應(yīng)變化平窘。
-
flex-item：
- order：
該屬性接收一個(gè)整數(shù)值，用來表示flex-item的先后順序凳怨，可使用負(fù)數(shù)瑰艘，默認(rèn)值為0。
- order：
.item {
order:<integer>;
}
這里我們?yōu)樽詈笠粋€(gè)box添加了
order:0猿棉，為其他box添加了order:1磅叛，結(jié)果時(shí)4號(hào)box移到第一位。
- flex-grow：
該屬性接收一個(gè)非負(fù)數(shù)作為比例系數(shù)萨赁，決定該flex-item的放大倍數(shù)，默認(rèn)值為0兆龙，即不放大杖爽。
.item {
flex-grow:<number>
}
該條屬性最佳應(yīng)用為讓子元素等分容器空間，所以使用這條屬性時(shí)不建議為flex-item添加固定寬度紫皇。
- flex-shrink：
該屬性接收一個(gè)非負(fù)數(shù)作為比例系數(shù)慰安，決定改flex-item的縮小倍速，默認(rèn)值為0聪铺，即不縮小化焕。
.item {
flex-shrink:<number>
}
這里我們?cè)O(shè)定容器寬度為500px，flex-item寬度為300px铃剔，4號(hào)box
flex-shrink:0撒桨，其他均為flex-shrink:1，顯而易見键兜，4號(hào)box未縮小凤类，寬度為300px，而其他盒子等比縮小普气，且大小相同谜疤。
- flex-basis：
該屬性決定該flex-item的主軸占據(jù)空間，可以為設(shè)定值或auto现诀，默認(rèn)值為auto夷磕，即flex-item本來尺寸。
.item {
flex-basis: <length> | auto;
這里我們沒有為123號(hào)box添加寬度仔沿，4號(hào)box
flex-basis:100坐桩，可看到除了4號(hào)box寬度固定，其他box等分空間于未。
- flex：
該屬性為flex-grow撕攒、flex-shrink陡鹃、flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto抖坪，后兩值為可選屬性萍鲸。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個(gè)快捷值，auto(1 1 auto)和none(0 0 auto)擦俐。
- align-self：
該屬性用于設(shè)定某個(gè)flex-item對(duì)于縱軸的對(duì)齊方式脊阴，可覆蓋容器上的align-item屬性，默認(rèn)值為auto蚯瞧，即繼承容器的對(duì)齊方式嘿期。該屬性可能取6個(gè)值，除了auto埋合，其他都與align-items屬性完全一致备徐。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
為了不再贅述，以align-self:flex-end舉例：
這里我們?yōu)槿萜魈砑恿?00px的高度甚颂，給4號(hào)box添加了
align-self:flex-end蜜猾，4號(hào)box便脫離了隊(duì)伍到達(dá)了縱軸結(jié)束的位置。
