Css3彈性盒子

css3彈性盒子（fiexbox）

1.彈性盒子：隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列、對齊和分配。

2.彈性盒子=彈性容器+彈性子元素

注：彈性盒子在父元素寫，只定義子元素的布局。

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

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

3.瀏覽器支援（相容模式）

3.定義彈性盒子： display: flex/inline-flex

4.改變排列方式：

1) direction ：rtl    /* rightto left */

2) 位置

flex-direction: row/row-reverse/column/column-reverse

row:橫向從左到右排列（左對齊），預設

row-reverse:反向橫排列（右對齊），最後一項在最前面

column:縱向排列

column-reverse:    反向縱排列，最後一項在最上面

justify-content:flex-start/flex-end/center/space-between/space-around

flex-start :從頭緊挨邊線開始填充

flex-end：緊挨尾部邊線填充

center：居中

space-between:第一項緊挨mian-start邊線對齊，最後一項緊挨mian-end邊線對齊，其餘間隔相等在同一行。

space-around：首尾兩邊各留一半間隔排列，其餘間隔相同。

flex-start/flex-end/center/baseline/stretch

5)flex-wrap:nowrap/wrap/reverse

單行/溢位換行/溢位放上行

6）align-cotent:用於修改

flex-wrap

屬性，類似

align-items

，不是設定彈性子元素的對齊，而是設定各行的對齊。

flex-start/center/flex-end/space-between/space-around/stretch

flex-start：各行向彈性盒子容器的起始位置堆疊

flex-end：各行向彈性盒子容器的結束位置堆疊

center：各行向彈性盒子容器的中間位置堆疊

space-between：各行在彈性容器中平均分布

space-around：各行在彈性容器中平均分布，兩端保留子元素之間的間距大小的一半

stretch：各行伸展占用剩餘位置（預設）

eg.flex : 3   /*佔總空間的三份*/

8)  order:n  /*n越小子元素排序越靠前*/

增：選擇器中：

a : not (: last-of-type)   /*

表示除了最後乙個超連結

*/

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彈性盒子 彈性盒子是 css3 的一種新的布局模式，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inli...