學習CSS盒模型和CSS3彈性盒模型

css盒模型本質是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

div

+ 50px (左 + 右填充)

+ 50px (左 + 右邊框)

+ 50px (左 + 右邊距)

= 450px

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

彈性盒子是 css3 的一種新的布局模式。

css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。

彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內包含了乙個或多個彈性子元素。

注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。

彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。

以下元素展示了彈性子元素在一行內顯示，從左到右:

flex item 1

flex item 2
flex item 3

flex-direction的屬性指定了彈性子元素在父容器中的位置。

語法：

flex

-direction
:row 
|row
-reverse 
|column 
|column
-reverse

.flex-container

align

-content
:flex
-start 
|flex
-end
|center 
|space
-between 
|space
-around 
|stretch

以下例項演示了center的使用:

.flex-container

order

:

order屬性設定彈性容器內彈性子元素的屬性:

.flex-item 

.first 

以下例項在第乙個彈性子元素上設定了margin-right: auto;。 它將剩餘的空間放置在元素的右側：

以下例項將完美解決我們平時碰到的居中問題。

使用彈性盒子，居中變的很簡單，只想要設定margin: auto;可以使得彈性子元素在兩上軸方向上完全居中:

align-self屬性用於設定彈性元素自身在側軸（縱軸）方向上的對齊方式。

align

-self
:auto
|flex
-start 
|flex
-end
|center 
|baseline 
|stretch

flex屬性用於指定彈性子元素如何分配空間。

flex

:auto
|initial 
|none 
|inherit |[
flex
-grow ]||
[flex
-shrink ]||
[flex
-basis 
]

css3 彈性盒模型

1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...

CSS3彈性盒模型

一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...

Css3彈性盒模型

css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...