移動端 彈性盒子布局

1.基本概念：

採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。

容器預設存在兩根軸：水平的主軸（main axis）和垂直的縱軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main

start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size

row（預設值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿

lex-wrap屬性：它可以取三個值。

nowrap（預設）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

flex-start（預設值）：左對齊 flex-end：右對齊 center： 居中

space-between：兩端對齊，專案之間的間隔都相等。

space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

flex-start：縱軸的起點對齊。

flex-end：縱軸的終點對齊。

center：縱軸的中點對齊。

baseline:專案的第一行文字的基線對齊。

stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（預設值）：軸線佔滿整個交叉軸。

3. 專案屬性：

如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

4.彈性（伸縮）布局：

flex專案實現自動伸縮：

您可以定義乙個flex專案，如何相對於flex容器實現自動的伸縮。需要給每個flex專案設定flex屬性設定需要伸縮的值。

.bigitem

.smallitem

移動端 彈性盒子

1.父級 display box display moz box display webkit box box orient horizontal moz box orient horizontal webkit box orient horizontal horizontal表橫向，vertica...

彈性盒子布局

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

flex彈性盒子,,彈性盒子布局

flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...