彈性盒 Flexbox 和樣式

官網原文

zindex層疊順序：值越大 越靠前。

marginhorizontal === marginleft and marginright. marginvertical ===

margintop and marginbottom.

padding同上。

right值是指將本元件定位到距離右邊多少個邏輯畫素（右邊的定義取決於position屬性）。

position enum(『absolute』, 『relative』)

預設情況下所有元件都是相對的，故所有的定位都是相對於它父元件的。

justifycontent enum(『flex-start』, 『flex-end』, 『center』, 『space-between』, 『space-around』)

alignself enum(『auto』, 『flex-start』, 『flex-end』, 『center』, 『stretch』)

alignself決定了元素在父元素的次軸方向的排列方式（此樣式設定在子元素上），其值會覆蓋父元素的alignitems的值。其表現和css上的align-self一致（預設值為auto）。

alignitems enum(『flex-start』, 『flex-end』, 『center』, 『stretch』)

alignitems決定了子元素在次軸方向的排列方式（此樣式設定在父元素上）。例如若子元素本來是沿著豎直方向排列的（即主軸豎直，次軸水平），則alignitems決定了它們在水平方向的排列方式。此樣式和css中的align-items表現一致，預設值為stretch。

在react native中flex的表現和css有些區別。 flex在rn中只能為整數值。

flex為正整數時，它使元件變得靈活，它的大小與它的伸縮值成比例。因此，flex設定為2的元件將需要兩倍的空間作為乙個元件與flex設定為1。

當flex為0，該元件是根據寬度和高度大小，它是不靈活的。

當flex是- 1，該元件通常大小根據寬度和高度。然而，如果沒有足夠的空間，該元件將收縮其minwidth和minheight。

flexgrow，flexshrink，和flexbasis工作相同的css。

flex屬性預設是0 1 auto

flex-grow為0，則存在剩餘空間也不放大

flex-shrink為1，則空間不足該專案縮小

flex-basis為auto，則該專案本來的大小

flex-grow為1

flex-shrink為1

flex-basis為0%

flex-basis 規定的是子元素的基準值。所以是否溢位的計算與此屬性息息相關。flex-basis 規定的範圍取決於 box-sizing。這裡主要討論以下 flex-basis 的取值情況：

auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值採取主尺寸之值；如果也是 auto，則使用值為 content。

content：指根據該子元素的內容自動布局。有的使用者**沒有實現取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

百分比：根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決於子元素），則計算結果和設為 auto 一樣。

舉乙個不同的值之間的區別：

class="parent">

class="item-1">
div>
class="item-2">
div>
class="item-3">
div>
div>
type="text/css">
.parent
.parent > div
.item-1
.item-2
.item-3
style>

主軸上父容器總尺寸為 600px 子元素的總基準值是：0% + auto + 200px = 300px，其中

- 0% 即 0 寬度

- auto 對應取主尺寸即 100px 故剩餘空間為 600px - 300px = 300px 伸縮放大係數之和為： 2 + 2 + 1 = 5 剩餘空間分配如下：

- item-1 和 item-2 各分配 2/5，各得 120px

- item-3 分配 1/5，得 60px 各專案最終寬度為：

- item-1 = 0% + 120px = 120px

- item-2 = auto + 120px = 220px

- item-3 = 200px + 60px = 260px 當 item-1 基準值取 0% 的時候，是把該專案視為零尺寸的，故即便宣告其尺寸為 140px，也並沒有什麼用，形同虛設 而 item-2 基準值取 auto

的時候，根據規則基準值使用值是主尺寸值即 100px，故這 100px 不會納入剩餘空間

定義兩個可伸縮的 p 元素。如果父元素的總寬度是 300 畫素，則 #p1 的寬度是 100 畫素，而 #p2 的寬度是 200 畫素：

#p1

#p2

目前沒有瀏覽器支援 box-flex 屬性。

firefox 支援替代的 -moz-box-flex 屬性。

safari、opera 以及 chrome 支援替代的 -webkit-box-flex 屬性。

彈性盒模型flexbox布局例項

我認為當flexbox支援所有的瀏覽器時，由於它比浮動布局更加的簡單和強大性，它將徹底的改變我們的css 布局方式。例如我們可以很容易的寫出乙個元素在未知比例下的居中對齊布局。當然css3 新增的其它屬性，例如grid也可以給前端開發 帶來更多的布局方式。下面給出一些例子來證明為什麼web 開發者應...

17 flexbox彈性盒模型

flexbox彈性盒模型 給父級新增flex display flex 換行 flex wrap wrap flex direction 元素主軸的方向，預設值row，從左到右 row reverse 從右到左 column從上到下 column reverse 從下到上 flex directio...

css3彈性盒模型flexbox

設定給父元素盒子，將乙個元素設定成彈性盒子 決定顯示的方向 即專案的排列方向 1.row 預設值，左對齊，順序顯示 2.row reverse 右對齊 倒序顯示 3.column 豎直順序顯示 4.column reverse 豎直倒序顯示 如果一行排不下，如何換行 1.nowrap 預設，不換行 ...