CSS flex布局中的flex grow詳解

父級元素稱為：容器（

container

）容器子元素成為：專案（

item

）

<

div 
class
="container"
>
<
div 
class
="box box1"
>1
div>
<
div 
class
="box box2"
>2
div>
<
div 
class
="box box3"
>3
div>
<
div 
class
="box box4"
>4
div>
<
div 
class
="box box5"
>5
div>
<
div 
class
="box box6"
>6
div>
div>

：這是專案

的乙個屬性，定義了專案的放大

比例，如果為

0，即使有剩餘空間也不會放大。

解決的問題：空間有多餘時把多餘空間分配給各個子元素（專案）。

通俗理解：以上面**做說明，

container

有1800px

寬度，6

個box（item）

分別為200px

，那麼container

剩餘的寬度則為

600px

，flex-grow

就是用來設定

box怎樣瓜分剩餘空間（寬度）。

flex-grow

取值為非負數（注：如果取值為負數那麼和

0的取值效果相同）。

box的

flex-grow預設值為0

<

style
>
.container 
.box 
style
>
<
div 
class
="container"
>
<
div 
class
="box box1"
>1
div>
<
div 
class
="box box2"
>2
div>
<
div 
class
="box box3"
>3
div>
<
div 
class
="box box4"
>4
div>
<
div 
class
="box box5"
>5
div>
<
div 
class
="box box6"
>6
div>
div>

概念：將所有正整數相加得到分母

sum，每個屬性的數值作為分子，然後乘以剩餘空間。

公式：分之/分母

*剩餘空間例子1

：

.box1,

.box2,
.box3 

sum=1+1+1=3

box1

分到的寬度：

1/3*600px=200px

box2

分到的寬度：

1/3*600px=200px

box3

分到的寬度：

1/3*600px=200px

box1-box6

的寬度分別為：

例子2：

.box1 

.box2 
.box3 

sum=1+2+3=6

box1

分到的寬度：

1/6*600px=100px

box2

分到的寬度：

1/3*600px=200px

box3

分到的寬度：

1/2*600px=300px

box1-box6

的寬度分別為：

概念：小數乘以剩餘空間。

公式：小數

*剩餘空間

例子：

.box1 

.box2 

分到的寬度：

0.1*600px=60px

box2

分到的寬度：

0.2*600px=120px

剩餘的寬度

600-

（60+120

）= 420

沒有使用

box1-box6

的寬度分別為：

計算方式與正整數一樣，如分母取值：

sum=0.1+0.2+1=1.3

，分子分別為：

0.1/1.3

、0.2/1.3

、1/1.3

css flex布局中妙用margin auto

在使用flex布局時僅使用align items和justify content有時並不能滿足我們的需要，通過margin auto我們可以實現一些比較有用的布局。我們先弄乙個小demo，下面的例子都是基於這個demo做修改 id container class box box1 1div clas...

css flex布局實用

張歆琳 關注2016.06.17 10 50 字數 701 閱讀 1063 喜歡 15 首先弄出原始的html結構，左右側邊欄定寬220px id footer footerdiv 現在將內容容器 page 設成flex彈性盒模型 page 中間main就是個普通的div，因此寬度好像沒有自適應，很...

css flex布局基礎

1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...