學(xué)習(xí)最好的方法就是把你知道的告訴別人

flex布局在網(wǎng)頁布局應(yīng)用廣泛。優(yōu)點(diǎn)：響應(yīng)式著瓶、使用簡(jiǎn)單、布局靈活啼县，廢話不多說材原，馬上開始搞定它。

/************ 初始代碼 *************/
<!-- html -->
<div class='container'>
  <div class='box1'></div>
  <div class='box2'></div>
  <div class='box3'></div>
</div>
<!-- css -->
.container {
  display:flex;
}
.box1 {
  width:100px;
  height:100px;
  background-color:red;
}
.box2 {
  width:100px;
  height:100px;
  background-color:yellow;
}
.box3 {
  width:100px;
  height:100px;
  background-color:green;
}

要點(diǎn)1：display:flex

給元素添加了display:flex季眷，那么該元素就會(huì)變成flex容器余蟹，這是上面代碼效果圖：

要點(diǎn)2：flex-direction

flex-direction設(shè)置父容器的排列方向，那么子元素就會(huì)以row（水平方向）或column（垂直方向）排列子刮。

flex-direction屬性：

• row（默認(rèn)值）子元素按水平方向排列
• column 子元素按垂直方向排列
• row-reverse （子元素按row的相反順序排列并靠右）
• column-reverse (子元素按column相反順序排列并靠底)

.container {
  display:flex;
  flex-direction:column;
}

上面代碼給父容器設(shè)置了flex-direction:column屬性威酒，那么子元素就會(huì)被以列的方式排列。

其他屬性自己分別試試哦

要點(diǎn)3：justify-content對(duì)齊元素

justify-content 使子元素沿主軸排列，當(dāng)flex-direction:row時(shí)兼搏，父容器的主軸就是水平方向的，當(dāng)flex-direction:column時(shí)沙郭，父容器的主軸就是垂直方向的佛呻。

justify-content屬性值：

• center 讓子元素在父容器中沿主軸方向居中對(duì)齊,當(dāng)方向?yàn)樾袝r(shí)，水平居中病线，當(dāng)方向?yàn)榱袝r(shí)吓著，垂直居中
• flex-start 讓子元素在父容器中沿主軸方向靠頭放置
• flex-end 讓子元素在父容器中沿主軸方向靠尾放置
• space-between 讓頭子元素和尾子元素在父容器中沿主軸靠最兩端放置，中間各子元素間距均分
• space-around 跟space-between相似送挑，頭尾子元素跟容器的邊界有一定間距绑莺，中間各子元素間距均分

這些概念是不是很抽象？沒關(guān)系看代碼和效果你就馬上能夠理解了惕耕。

主軸方向?yàn)樗椒较颍?/h3>

1. center 讓子元素在父容器中沿主軸方向居中對(duì)齊,當(dāng)方向?yàn)樾袝r(shí)纺裁，水平居中，當(dāng)方向?yàn)榱袝r(shí)司澎，垂直居中

/* 子元素居中 */
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  background-color:gray;
}

justify-content:center

2. flex-start 讓子元素在父容器中沿主軸方向靠頭放置

/* 子元素靠頭 */
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  background-color:gray;
}

justify-content:flex-start

3. flex-end 讓子元素在父容器中沿主軸方向靠尾放置

/* 子元素靠尾 */
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  background-color:gray;
}

justify-content:flex-end

4. space-between 讓頭子元素和尾子元素在父容器中沿主軸靠最兩端放置欺缘，中間各子元素間距均分

/* 首尾子元素靠邊 ，中間均勻分布*/
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  background-color:gray;
}

justify-content:space-between

5. space-around 跟space-between相似挤安，頭尾子元素跟容器的邊界有一定間距谚殊，中間各子元素間距均分

/* 首尾子元素不靠邊 ，中間均勻分布*/
.container {
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  background-color:gray;
}

justify-content:space-around

主軸方向?yàn)榇怪狈较颍?/h3>

.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background-color:gray;
}

justify-content:center

.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background-color:gray;
}

justify-content:flex-start

.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background-color:gray;
}

justify-content:flex-end

.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color:gray;
}

justify-content:space-between

.container {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  background-color:gray;
}

justify-content:space-around

要點(diǎn)4：align-items

與主軸垂直的叫交叉軸蛤铜，align-items表示子元素沿交叉軸排列嫩絮，row的交叉軸是垂直方向的，column的交叉軸是水平方向的围肥。

align-items的屬性：

• center 子元素在交叉軸上居中排列剿干，當(dāng)方向?yàn)樾袝r(shí)，元素垂直居中虐先，當(dāng)方向?yàn)榱袝r(shí)怨愤，元素水平居中
• flex-start 從父容器頭部（最前端）開始放置
• flex-end 從父容器尾部（最底部）開始放置
• stretch 沿交叉軸方向拉伸項(xiàng)目，填滿flex容器（父容器）
• baseline 各子元素沿文字基線對(duì)齊

下面請(qǐng)仔細(xì)看各個(gè)屬性的不同之處吧蛹批。

當(dāng)flex-direction:row時(shí)(交叉軸為垂直方向)

1. center :子元素在交叉軸上居中排列撰洗，當(dāng)方向?yàn)樾袝r(shí)，元素垂直居中腐芍，當(dāng)方向?yàn)榱袝r(shí)差导，元素水平居中

  .container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items: center;
  background-color:gray;
}

2. flex-start：從父容器頭部（最前端）開始放置

.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  background-color:gray;
}

align-items:flex-start

3. flex-end：從父容器尾部（最底端）開始放置

.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  background-color:gray;
}

4. stretch：沿交叉軸方向拉伸項(xiàng)目，填滿flex容器（父容器）

.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  background-color:gray;
}
/*  */
.box1 {
  width:100px;
  background-color:red;
}
.box2 {
  width:100px;
  background-color:yellow;
}
.box3 {
  width:100px;
  background-color:green;
}

5. baseline 各子元素沿文字基線對(duì)齊

.container {
  height:500px;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  background-color:gray;
  text-align:center;
}
.box1 {
  width:100px;
  height:100px;
  font-size:30px;
  background-color:red;
}
.box2 {
  width:100px;
  height:100px;
  font-size:20px;
  background-color:yellow;
}
.box3 {
  width:100px;
  height:100px;
  background-color:green;
}

tips:如何利用justify-content（主軸） 和align-items（交叉軸）猪勇，讓子元素水平和垂直居中设褐。

請(qǐng)看代碼吧：

.container {
  height:500px;
  display:flex;
  justify-content:center; /*** 水平居中 ***/
  align-items:center;     /*** 垂直居中 ***/
  background-color:gray;
}

soeasy對(duì)吧！！助析！

要點(diǎn)5：flex-wrap

默認(rèn)flex容器會(huì)把自動(dòng)調(diào)整子元素的大小犀被，如果是方向?yàn)?code>row的話把它們?nèi)谝恍校ㄋ骄€）里面
使用flex-wrap 包裹一行或一列，可以使多出來的子元素移到新的行或新的列外冀。(只在水平方向有效果)

屬性值：

• nowrap 默認(rèn)值
• wrap 多余的移動(dòng)新的行中
• wrap-reverse 跟wrap的方向顛倒

1. nowrap 默認(rèn)值（不換號(hào)）

.container {
  height:500px;
  display:flex;
  flex-wrap:nowrap;
  background-color:gray;
}
.box1 {
  width:50%;
  height:50%;
  background-color:red;
}
.box2 {
  width:50%;
  height:50%;
  background-color:yellow;
}
.box3 {
  width:50%;
  height:50%;
  background-color:green;
}

2. wrap 多余的移動(dòng)到新的行中

.container {
  height:500px;
  display:flex;
  flex-wrap:wrap;
  background-color:gray;
}

3. wrap-reverse 跟wrap的方向顛倒

.container {
  height:500px;
  display:flex;
  flex-wrap:wrap-reverse;
  background-color:gray;
}

要點(diǎn)6：flex-shrink

• flex-shrink 見其名寡键，知其意，就知道它是用來收縮元素的雪隧，當(dāng)容器的大下西轩，小于元素的大小的時(shí)候，該元素就會(huì)被壓縮放小脑沿，比如藕畔，當(dāng)容器的寬度小于元素的寬度時(shí)，元素就會(huì)被自動(dòng)壓縮庄拇。
• flex-shrink它 接受的是number 類型的值注服。
• number的值越大，該元素相比其他元素的被壓縮的更大丛忆，反之祠汇，壓縮更小，比如熄诡，A元素的flex-shrink:1可很，B元素的flex-shrink:2 ,那么B跟A相比就被壓縮2倍。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  width:100%;
  height:50%;
  background-color:red;
  flex-shrink:1;
}
.box2 {
  width:100%;
  height:50%;
  background-color:yellow;
  flex-shrink:2;
}

要點(diǎn)7：flex-grow

flex-grow：與flex-shrink相反凰浮，它用來擴(kuò)展元素我抠。flex-shrink為容器較小時(shí)，對(duì)元素進(jìn)行相應(yīng)調(diào)整袜茧，flex-grow為當(dāng)容器較大時(shí)菜拓，對(duì)元素進(jìn)行相應(yīng)調(diào)整

比如 A元素的flex-grow:1,B元素的flex-grow:2時(shí)，那么B比A大2倍笛厦。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  height:50%;
  background-color:red;
  flex-grow:1;
}
.box2 {
  height:50%;
  background-color:yellow;
  flex-grow:2;
}

要點(diǎn)8：flex-basic

flex-basic 用來設(shè)置當(dāng)元素使用了flex-shrink或flex-grow前的初始大小纳鼎。

flex-basic 接受的值px、em裳凸、%贱鄙、rem 等，auto的話姨谷，大小依賴于自身的內(nèi)容

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  height:50%;
  background-color:red;
  flex-basis:100px;
  flex-grow:1;
}
.box2 {
  height:50%;
  background-color:yellow;
  flex-basis:200px;
  flex-grow:5;
}

要點(diǎn)9：flex 屬性簡(jiǎn)寫

flex:1 2 30px; ：表示把該元素設(shè)置為flex-grow: 1;逗宁、 flex-shrink: 2;和flex-basis: 30px;

box1 為flex:3 3 100px; 和box2 為flex-grow:1 1 100px;
表示當(dāng)容器的大于200px 時(shí)，box1 會(huì)被填充倍率為box2 的3 倍梦湘，當(dāng)容器的小于200px 時(shí)瞎颗，它的壓縮倍率為box2 的3 倍件甥。200px 為兩個(gè)元素的flex-basis的值之和。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  height:50%;
  background-color:red;
  flex:3 3 100px;
}
.box2 {
  height:50%;
  background-color:yellow;
  flex-grow:1 1 100px;
}

大于200px時(shí)

要點(diǎn)10： order 給元素設(shè)置排列的順序

html里的元素默認(rèn)是從上往下排列哼拔，使用order可以更改它們的放置的順序引有，數(shù)值越小排在前面，接受負(fù)數(shù)倦逐。

.container {
  height:500px;
  display:flex;
  background-color:gray;
}
.box1 {
  width:100px;
  height:50%;
  background-color:red;
  order:1;
}
.box2 {
  width:100px;
  height:50%;
  background-color:yellow;
  order:-1;
}

黃色盒子被放置在紅色盒子前

擔(dān)心大家不能理解主軸和交叉軸轿曙，特附上了兩張圖方便理解。

當(dāng)你理解了主軸和交叉軸僻孝，你就能很快能分清楚當(dāng)容器為行或列的方向時(shí)，能迅速對(duì)元素設(shè)置你想要的效果了守谓，沒能馬上理解也沒關(guān)系穿铆，應(yīng)用多了，再回來回顧復(fù)習(xí)斋荞，相信很快就能掌握荞雏。

flex布局到這里就結(jié)束了！Ｆ侥稹凤优！，有木有很簡(jiǎn)單蜈彼，你學(xué)會(huì)了嗎筑辨？

最后補(bǔ)一條，看到的永遠(yuǎn)是別人的幸逆，做了才是自己的棍辕。