flex的屬性的值是 flex-grow, flex-shrink, flex-basis的縮寫
flex的屬性的值是 flex-grow flex-shrink flex-basis的縮寫,
- 1.默認(rèn)值是 0 1 auto;
- 2.當(dāng)值為none即（0 0 auto）;
- 3.當(dāng)值為auto即 （1 1 auto）;
- 4.當(dāng)flex取值為一個(gè)非負(fù)數(shù)字，則該數(shù)字為flex-grow的值, flex-shrink取1逛裤， flex-basis取0%瘩绒；
- 5.當(dāng)flex取值為一個(gè)長(zhǎng)度或百分比，則視為flex-basis的值带族， flex-grow取1锁荔， flex-shrink取1；
- 6.當(dāng) flex 取值為兩個(gè)非負(fù)數(shù)字蝙砌，則分別視為 flex-grow 和 flex-shrink 的值阳堕，flex-basis 取 0%;
- 7.當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字和一個(gè)長(zhǎng)度或百分比，則分別視為 flex-grow 和 flex-basis 的值择克，flex-shrink 取 1
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex的深度嘗試</title>
</head>
<body>
<article class="f1">
<style type="text/css">
.box { display: flex; width: 800px;}
.box>div {height: 100px;}
.box>div:nth-of-type(1) {background-color: blueviolet; flex: 2 1 0%; width: 140px;}
.box>div:nth-of-type(2) {background-color: wheat; flex: 2 1 auto; width: 100px;}
.box>div:nth-of-type(3) {background-color: cadetblue; flex: 1 1 200px;}
</style>
<h2>flex-basis是如何影響計(jì)算</h2>
<section class="box">
<div>開(kāi)始?jí)K</div>
<div>中間塊</div>
<div>尾部塊</div>
</section>
<!--
主軸上父容器尺寸為800px大小;
子元素的總基準(zhǔn)值是：0% + auto + 200px = 300px;(auto 對(duì)應(yīng)取主尺寸即 100px)
故剩余空間為 800px - 300px = 500px恬总；
子元素放大系數(shù)之和為：2 + 2 + 1 = 5；(每份得500/5 = 100px;)
項(xiàng)目最終寬度如下：
1.第一個(gè)元素為 0% + 100px * 2 = 200px;
2.第二個(gè)元素為 auto + 100px * 2 = 100px + 200px = 300px;
3.第三個(gè)元素為 200px + 100px = 300px;
-->
</article>
</body>
</html>
flex-basis 規(guī)定的是子元素的基準(zhǔn)值肚邢。所以是否溢出的計(jì)算與此屬性息息相關(guān)壹堰。
flex-basis 規(guī)定的范圍取決于 box-sizing。這里主要討論以下 flex-basis 的取值情況：
- auto：首先檢索該子元素的主尺寸骡湖，如果主尺寸不為 auto贱纠，則使用值采取主尺寸之值；如果也是 auto响蕴，則使用值為 content谆焊。
- content：指根據(jù)該子元素的內(nèi)容自動(dòng)布局。有的用戶代理沒(méi)有實(shí)現(xiàn)取 content 值浦夷，等效的替代方案是 flex-basis 和主尺寸都取 auto辖试。
- 百分比：根據(jù)其包含塊（即伸縮父容器）的主尺寸計(jì)算辜王。如果包含塊的主尺寸未定義（即父容器的主尺寸取決于子元素），則計(jì)算結(jié)果和設(shè)為 auto 一樣剃执。
