CSS3 彈性盒子

一.彈性盒子（flex布局）

1.flex 是 flexible box 的縮寫，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式，任何乙個容器都可以指定為 flex 布局

2.當我們為父盒子設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性將失效

3.flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局採用 flex 布局的元素，稱為 flex 容器（flex container）。它的所有子元素自動成為容器成員，稱為 flex（flexitem），簡稱"專案"

二.父盒子上的屬性

flex-direction：設定主軸的方向

justify-content：設定主軸上的子元素排列方式

flex-wrap：設定子元素是否換行

align-content：設定側軸上的子元素的排列方式（多行）

align-items：設定側軸上的子元素排列方式（單行）

flex-flow：復合屬性，相當於同時設定了 flex-direction 和 flex-wrap

三.父盒子上的屬性的取值和說明:

1.flex-direction:

主軸和側軸是相對的，flex-direction 設定誰為主軸，誰就是主軸而另外子元素是跟著主軸來進行排列的

row; 預設值從左到右

row-reverse; 從右到左

column; 從上到小

column-revers; 從下到上

eg:

<

!doctype html>
"en"
>
"utf-8"
>
* #box 
#div1, #div2, #div3 
#div1 
#div2 
#div3 
彈性盒子
"box"
>
"div1"
>
"div2"
>
"div3"
>

flex-start; 從頭開始

flex-end; 從尾部開始

center; 主軸居中對齊

space-between; 平分剩餘空間

space-around; 兩邊貼邊，再分剩餘空間

3.flex-wrap

設定是否換行，預設不換行

nowrap; 不換行

wrap; 換行

4.align-content

flex-start; 從頭部開始

flex-end; 從尾部開始

center; 居中顯示

stretch ;拉伸

space-between; 平分剩餘空間

space-around; 兩邊貼邊，再分剩餘空間

5.align-items

flex-start; 從頭部開始

flex-end; 從尾部開始

center; 居中顯示

stretch; 拉伸

語法:

flex-flow:row wrap;

2.align-self 控制子項自己在側軸的排列方式

3.order 屬性定義子項的排列順序（前後順序）

五.子盒子上的屬性的取值和說明:

1.flex :

flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。

flex: 

; /* 預設值 0 */

align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。

預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。

/* 設定自己在側軸上的排列方式 */

align-self: flex-end;

數值越小，排列越靠前，預設為0。

order: 

;

css3 彈性盒子

display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...

Css3 彈性盒子

彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...

Css3彈性盒子

css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...