前面都是介紹設定在flex元素的屬性，那今天就來說設定在flex元素內的子項目可以設定的屬性!

選手介紹

• flex-grow
• flex-shrink
• flex-basis

flex-grow 擴展

可以決定彈性容器在分配空間時，彈性項目在主軸彈性行的剩餘空間中可以擴張的比例。

flex-grow 的數字使用規定要大於等於 0（小數點也可以）。

HTML

<div class="container">
        <div class="box-1">A</div>
        <div class="box-2">B</div>
        <div class="box-3">C</div>
</div>

CSS

.container{
            width: 960px;
            height: 600px;
            display: flex;
            background-color: black;
            margin: auto;
        }
.box-1,.box-2,.box-3{
            width: 100px;
            height: 200px;
            font-size: 40px;
            text-align: center;

}
.box-1{
          background-color: aqua;
}
.box-2{
          background-color: blueviolet;
}
.box-3{
          background-color: blanchedalmond;
}

這邊給物件高度的原因是因為如果沒有高度會拉伸，視覺上不好看。

接下來試著加看看flex-grow，沒有加的預設值就是0

.box-1{
          background-color: aqua;
          flex-grow:1;
          
}
.box-2{
          background-color: blueviolet;
}
.box-3{
          background-color: blanchedalmond;
}

圖1

.box-1{
          background-color: aqua;
          flex-grow:1;
          
}
.box-2{
          background-color: blueviolet;
          flex-grow:2;
}
.box-3{
          background-color: blanchedalmond;
}

圖2

那空間是怎麼計算的呢?

計算上是按照剩餘空間的給予佔比去做比例計算，所以還是可能出現設定比例一樣但結果不一樣的情形，那有可能就是剩餘空間的尺寸不一樣，不要誤以為 flex-grow 是在設定彈性項目的寬度比例。

拿這個例子來說，起始我的flex元素設定的寬度是900px，flex元素內的子元素每個寬度是100px。

所以主軸剩餘可用空間為900-100X3=600px，這600px會按照你給子元素grow的數值去分給子元素。

如果設定了flex-grow就算原本有設定的寬度就沒有用了。

上面的例子很明顯可以看出圖一把剩餘的空間600px都給了box1，box1的寬度變為700px。

圖二空間就是分給box1跟box2，但是因為grow的數值不同所以分到的空間不同。

600px除以3=200px，為什麼是3?因為flex-grow的數值分別是1跟2，1+2=3。

box1的flex-grow數值是1所以寬度變為300px而box2flex-grow數值是1寬度變為500px。

flex-shrink 壓縮

flex-shrink可以決定flex元素在分配空間時，flex元素內子項目在主軸彈性列超出的空間中可以被壓縮的比例。

.container {
			  width: 960px;
			  height: 600px;
			  display: flex;
			  background-color: black;
			  margin: auto;
}
.box-1,
.box-2,
.box-3 {
		   width: 400px;
		   height: 200px;
		   font-size: 40px;
		   text-align: center;
}
.box-1 {
		   background-color: aqua;
}
.box-2 {
		   background-color: blueviolet;
}
.box-3 {
		   background-color: blanchedalmond;
}

這邊我把寬度調高，讓子項目會超出flex元素。

.container {
			  width: 960px;
			  height: 600px;
			  display: flex;
			  background-color: black;
			  margin: auto;
}
.box-1,
.box-2,
.box-3 {
		   width: 400px;
		   height: 200px;
		   font-size: 40px;
		   text-align: center;
}
.box-1 {
		   background-color: aqua;
           flex-shrink: 2;
}
.box-2 {
		   background-color: blueviolet;
}
.box-3 {
		   background-color: blanchedalmond;
}

這邊box-1就會被壓縮了。

.container {
			  width: 960px;
			  height: 600px;
			  display: flex;
			  background-color: black;
			  margin: auto;
}
.box-1,
.box-2,
.box-3 {
		   width: 400px;
		   height: 200px;
		   font-size: 40px;
		   text-align: center;
}
.box-1 {
		   background-color: aqua;
           flex-shrink: 0;
}
.box-2 {
		   background-color: blueviolet;
}
.box-3 {
		   background-color: blanchedalmond;
}

flex-shrink這個屬性的預設值是1，改為0就不會被壓縮

那今天先介紹兩位選手，因為比較複雜明天在用一篇介紹第三位選手basis。