CSS3 - flex屬性：flex-grow、flex-shrink和flex-basis

HTML

<div class="parent">
  <div class="c c1">1</div>
  <div class="c c2">2</div>
  <div class="c c3">3</div></div>
</div>

 CSS

.parent {
    height: 220px;
    width: 600px;
    display: flex;
}

① flex-basis

項目的長度，或者叫項目伸縮的基準值。可以是px em...或auto...。flex-grow和flex-shrink的實際效果都和這個基準值有關。默認值爲auto。

② flex-grow

擴展比例。針對的是項目（項目指子元素，即.c1、.c2 ...）中flex-basis的總和小於容器寬度的情況（容器指父元素，即.parent），讓項目按一定比例擴展，並恰好填充滿整個容器。

如何把要擴展的寬度分配到項目中：

.c {
	flex-basis:50px;
}
.c1 {
	flex-grow:1;
	background-color:#409EFF;
}
.c2 {
	flex-grow:2;
	background-color:#EEEEEE;
}
.c3 {
	flex-grow:1;
	background-color:#FAEBD7;
}

爲了方便把flex-basis都設置爲50px，用容器的寬度減去所有項目flex-basis的總和計算出剩下未分配的空間的寬度，即600px - (50px + 50px +50px) = 450px。剩下的空間的寬度 按flex-grow的比例進行擴展，值越大擴展的寬度越大。比如.c2的flex-grow爲2，即擴展的寬度爲450px*(2/4) = 225px，故.c2的寬度是flex-basis（基準值，50px）+ 225px（按比例擴展的值）= 275px。其他兩個類似。

③ flex-shrink

收縮比例。針對的是項目中flex-basis的總和大於容器寬度的情況，讓項目按一定比例縮放，並恰好能放進容器。

如何要縮放的寬度分配給項目

.c {
	flex-basis:220px;
}
.c1 {
	flex-shrink:1;
	background-color:#409EFF;
}
.c2 {
	flex-shrink:2;
	background-color:#EEEEEE;
}
.c3 {
	flex-shrink:1;
	background-color:#FAEBD7;
}

爲了方便把flex-basis都設置爲220px，用所有項目flex-basis的總和減去容器的寬度計算出溢出的空間的寬度，即(220px + 220px +220px) - 600px= 60px。溢出的空間的寬度 按flex-grow的比例進行縮放，值越大縮放的寬度也越大。比如.c2的flex-grow爲2，即他縮放的寬度爲60px*(2/4) = 30px，故.c2的寬度是flex-basis（基準值，220px）- 30px（按比例縮放的值）= 190px。其他兩個類似。

注意：

如果所有項目的flex-basis加起來的總和大於等於容器的寬度，並且沒有設置flex-shrink屬性，那麼會按項目的flex-basis之間的比例進行分配。

我的主頁：https://blog.csdn.net/qq_29750277，有關於前端（Vue、electron...）、Python等