彈性盒模型
由父元素控制子元素布局的方案,需要給父元素添加flex樣式,任意元素都可添加flex樣式
display: flex;
如果一個(gè)元素添加了上面的屬性,表示這個(gè)元素開始使用彈性盒模型布局
彈性布局分為 伸縮容器（父級(jí)） 和 伸縮項(xiàng)目（子級(jí)）
設(shè)置了彈性盒模型的元素被稱為容器, 內(nèi)部子元素為稱為項(xiàng)目.
容器默認(rèn)存在兩根軸：
- 水平的主軸（main axis）
- 垂直的交叉軸（cross axis）。
主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；
交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size
注意:
設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
1. 容器屬性
容器屬性總匯:
| 屬性 | 描述 |
|---|---|
| flex-direction | 指定彈性容器中子元素排列方式（控制主軸方向的） |
| flex-wrap | 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行（默認(rèn)不換行，不要加固定的寬度高度） |
| flex-flow | flex-direction 和 flex-wrap 的簡(jiǎn)寫 |
| justify-content | 設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式 |
| align-items | 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式 |
| align-content | 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊（前提允許換行flex-wrap） |
1.1. flex-direction 排列盒子方向
屬性值:
| 值 | 描述 |
|---|---|
| row | 默認(rèn)值。元素將水平顯示，正如一個(gè)行一樣。 |
| row-reverse | 與 row 相同，但是以相反的順序。 |
| column | 元素將垂直顯示，正如一個(gè)列一樣。 |
| column-reverse | 與 column 相同，但是以相反的順序。 |
1.2. flex-wrap 換行方式
控制flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向
屬性值:
| 值 | 描述 |
|---|---|
| nowrap | 默認(rèn)值。規(guī)定元素不拆行或不拆列。 |
| wrap | 規(guī)定元素在必要的時(shí)候拆行或拆列。 |
| wrap-reverse | 規(guī)定元素在必要的時(shí)候拆行或拆列，但是以相反的順序。 |
圖片介紹:
-
nowrap(默認(rèn))：不換行。
77j.jpg
2.wrap：換行，第一行在上方。
3.wrap-reverse：換行，第一行在下方。
1.3. flex-flow 屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，
默認(rèn)值為row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
1.4. justify-content 屬性
定義項(xiàng)目在主軸方向上的對(duì)齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
屬性值:
| 值 | 描述 |
|---|---|
| flex-start | 默認(rèn)值。項(xiàng)目位于容器的開頭。（主軸開始位置對(duì)齊） |
| flex-end | 項(xiàng)目位于容器的結(jié)尾。（主軸結(jié)束位置對(duì)齊） |
| center | 項(xiàng)目位于容器的中心。 |
| space-between | 項(xiàng)目位于各行之間留有空白的容器內(nèi)。（兩端對(duì)齊） |
| space-around | 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。（左右兩端占一個(gè)間隔，中間的元素之間的間隔是兩個(gè)間隔） |
1.5. align-items屬性
定義項(xiàng)目在交叉軸上如何對(duì)齊 。(適用于交叉軸單行或單列，只有一行或一列的情況)
align-items: flex-start | flex-end | center | baseline | stretch;
具體的對(duì)齊方式與交叉軸的方向有關(guān)
屬性值:
| 值 | 描述 |
|---|---|
| stretch | 默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。 |
| center | 項(xiàng)目位于容器的中心。 |
| flex-start | 項(xiàng)目位于容器的開頭。 |
| flex-end | 項(xiàng)目位于容器的結(jié)尾。 |
| baseline | 項(xiàng)目位于容器的基線上。 |
1.6. align-content 屬性 (多行對(duì)齊)
定義了多根（行）交叉軸的對(duì)齊方式。如果項(xiàng)目只單行，該屬性不起作用
屬性值:
| 值 | 描述 |
|---|---|
| stretch | 默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。 |
| flex-start | 與交叉軸的起點(diǎn)對(duì)齊 |
| flex-end | 與交叉軸的終點(diǎn)對(duì)齊。 |
| center | 與交叉軸的中點(diǎn)對(duì)齊。 |
| space-between | 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。 |
| space-around | 每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 |
<span style='color:red;'>多行下的align-content會(huì)使align-items失效</span>
<style>
* {
padding: 0;
margin: 0;
}
ul {
display: flex;
height: 500px;
width: 870px;
margin: 50px auto;
flex-direction: row-reverse;
/*主軸方向row（默認(rèn)） row-reverse column column-reverse*/
flex-wrap: wrap;
/* flex-wrap 換行方式nowrap(默認(rèn)) wrap wrap-reverse*/
/*flex-flow:row wrap;主軸 換行復(fù)合屬性*/
justify-content: space-between;
/*主軸對(duì)齊方式 flex-start flex-end center space-between space-around*/
/*align-items: flex-start; 單行對(duì)齊 stretch flex-end center baseline */
align-content: space-between;
/*多行對(duì)齊 stretch flex-start flex-end center space-around space-between*/
list-style: none;
background-color: pink;
}
ul li {
width: 100px;
height: 100px;
/*如果沒有高度值，項(xiàng)目默認(rèn)拉伸占滿交叉軸 align-items:stretch。其他值flex-end center 的高度靠?jī)?nèi)容撐開*/
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
2. item項(xiàng)目屬性
項(xiàng)目屬性總匯：
| 屬性 | 描述 |
|---|---|
| order | 設(shè)置彈性盒子的子元素排列順序。 |
| flex-grow | 設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。 |
| flex-shrink | 指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之<br />和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。 |
| flex-basis | 用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。 |
| flex | 設(shè)置彈性盒子的子元素如何分配空間。 |
| align-self | 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 |
1.1. order屬性 項(xiàng)目的排列順(數(shù)字)
屬性值: 數(shù)字
用整數(shù)值來定義排列順序，數(shù)值小的排在前面。可以為負(fù)值，默認(rèn)為0。
flex-item { order: 2; }
2.2. flex-grow屬性 放大比例(數(shù)字)
屬性值: 數(shù)字
規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。默認(rèn)值是 0。即如果存在剩余空間，也不放大
子元素的尺寸=子元素默認(rèn)的被內(nèi)容撐開的尺寸+父級(jí)盒子剩余空間尺寸*子元素的box-grow屬性值 / 所有子元素的flex-grow屬性值的和
flex-item { flex-grow: 2; }
<style>
* {
padding: 0;
margin: 0;
}
ul {
display: flex;
/*width: 800px;*/
/* max-width: 800px; */
/*元素默認(rèn)跟著瀏覽器100%顯示，限定最大值800，瀏覽為超春800，元素還是800，瀏覽器小于800px時(shí)，容器就會(huì)跟著縮小*/
/* min-width: 300px; */
/*瀏覽器窗口小于300，元素還是300，瀏覽器出現(xiàn)滾動(dòng)條*/
height: 200px;
margin: 50px auto;
list-style: none;
}
ul li {
background-color: pink;
}
ul li:nth-child(1) {
order: 1;
/*order項(xiàng)目的排列順(數(shù)字)*/
flex-grow: 2;
/*子元素的尺寸=子元素默認(rèn)的被內(nèi)容撐開的尺寸+父級(jí)盒子剩余空間尺寸*子元素的box-grow屬性值 / 所有子元素的flex-grow屬性值的和*/
background-color: yellow;
}
ul li:nth-child(even) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
2.3. flex-shrink屬性 縮小比例（數(shù)字）
屬性值: 數(shù)字
規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。默認(rèn)值是 1。即如果空間不足，該項(xiàng)目將縮小。
屬性值介紹：
- 如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。
- 如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者（為0的不被壓縮）不縮小。
-
負(fù)值對(duì)該屬性無(wú)效
3.jpg
彈性盒模型的項(xiàng)目默認(rèn)不擴(kuò)展flex-grow：0，默認(rèn)壓縮，flex-shrink:1。
2.4. flex-basis屬性 項(xiàng)目占據(jù)的主軸空間(px)
定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto（基準(zhǔn)空間靠?jī)?nèi)容撐開）
屬性值: <length> | <percentage> | auto | content
-
<length>： 用長(zhǎng)度值來定義寬度。不允許負(fù)值
.<percentage>： 用百分比來定義寬度。不允許負(fù)值
.auto：默認(rèn)值,無(wú)特定寬度值，取決于其它屬性值，auto的計(jì)算規(guī)則是 檢索一下你是否設(shè)置了width（或者h(yuǎn)eight值，取決于flex-direction）就會(huì)采用這個(gè)值，否則的話最后使用的值是 content。auto就是設(shè)置了就用設(shè)置的，沒有就靠?jī)?nèi)容撐開
.content： 基于內(nèi)容自動(dòng)計(jì)算寬度
2.5. flex屬性
flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。
flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫（擴(kuò)展，縮小，基準(zhǔn)值）
默認(rèn)值為0 1 auto
屬性值
| 值 | 描述 |
|---|---|
| flex-grow | 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行擴(kuò)展的量。 |
| flex-shrink | 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行收縮的量。 |
| flex-basis | 項(xiàng)目的長(zhǎng)度。合法值："auto"、"inherit" 或一個(gè)后跟 "%"、"px"、"em" <br />或任何其他長(zhǎng)度單位的數(shù)字。 |
| auto | 與 1 1 auto 相同。 |
| none | 與 0 0 auto 相同。 |
| initial | 設(shè)置該屬性為它的默認(rèn)值，即為 0 1 auto。 |
| inherit | 從父元素繼承該屬性。 |
屬性值介紹：
- 該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
- 建議優(yōu)先使用這個(gè)屬性而不分開寫，瀏覽器會(huì)推算相關(guān)值。
- grow表示伸張因子，shrink表示是收縮因子。
<style>
/*彈性盒模型flex項(xiàng)目縮放例子，左右固定，中間自適應(yīng)*/
* {
padding: 0;
margin: 0;
}
.wrap {
display: flex;
/*彈性盒模型*/
height: 60px;
background-color: #f3f3f3;
}
.left {
display: flex;
/*彈性盒模型*/
justify-content: center;
/*主軸居中對(duì)齊*/
align-items: center;
/*交叉軸居中對(duì)齊*/
flex: 0 0 auto;
/*不放大 不縮小 基準(zhǔn)寬度，沒有基準(zhǔn)寬度就內(nèi)容撐開 可以直接flex:none;*/
width: 50px;
background-color: pink;
}
.search {
display: flex;
/*彈性盒模型*/
justify-content: center;
/*主軸居中對(duì)齊*/
align-items: center;
/*交叉軸居中對(duì)齊*/
flex: 1 1 auto;
/*放大一倍 縮小一倍 默認(rèn)寬度auto基準(zhǔn)寬度，沒有基準(zhǔn)寬度就內(nèi)容撐開*。縮小比例默認(rèn)是1 默認(rèn)寬度auto，所以可以簡(jiǎn)寫flex:1;*/
background: skyblue;
}
.right {
display: flex;
/*彈性盒模型*/
justify-content: center;
/*主軸居中對(duì)齊*/
align-items: center;
/*交叉軸居中對(duì)齊*/
flex: 0 0 auto;
/*不放大 不縮小 基準(zhǔn)寬度，沒有基準(zhǔn)寬度就內(nèi)容撐開*/
width: 50px;
background-color: greenyellow;
}
input {
width: 100%;
height: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<</div>
<div class="search"><input type="text"></div>
<div class="right">享</div>
</div>
</body>
2.6. align-self 屬性（項(xiàng)目自己的交叉軸對(duì)齊方式）
允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性。
（默認(rèn)值為auto）表示示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致
屬性值:
| 值 | 描述 |
|---|---|
| auto | 默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 |
| stretch | 元素被拉伸以適應(yīng)容器。 |
| center | 元素位于容器的中心。 |
| flex-start | 元素位于容器的開頭。 |
| flex-end | 元素位于容器的結(jié)尾。 |
| baseline | 元素位于容器的基線上。 |
| initial | 設(shè)置該屬性為它的默認(rèn)值。 |
| inherit | 從父元素繼承該屬性。 |
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
ul {
display: flex;
align-items: center;
width: 500px;
height: 200px;
background-color: #f3f3f3;
list-style: none;
}
ul li {
width: 100px;
}
ul li:nth-child(1) {
height: 30px;
background-color: pink;
}
ul li:nth-child(2) {
height: 80px;
background-color: green;
}
ul li:nth-child(3) {
height: 20px;
background-color: blue;
}
ul li:nth-child(4) {
height: 20px;
background-color: yellow;
}
ul li:nth-child(5) {
height: 50px;
align-self: flex-end;
/*元素位于容器的結(jié)尾*/
background-color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
3. flex兼容性
3.1. 舊版本的flex寫法只支持舊的語(yǔ)法書寫
- 最早： display: box;
- 過渡： display: flex box;
- 當(dāng)今標(biāo)準(zhǔn)display: flex;
3.2. 為了兼容老版本的瀏覽器
需要加瀏覽器兼容前綴
