彈性佈局（Flex佈局）的詳細介紹

一、  彈性佈局

　　在平時的我們常用的佈局類型有以下幾種：

##　　1.浮動+定位

　　2.自適應（百分比）

　　3.響應式佈局

　　4.彈性佈局（Flex佈局）

　　##　　今天所整理的就是比較常用的彈性佈局，但區塊標籤與行內區塊標籤是有區別的。

{:;
}
input{
　　:;
}

　　當然不是所有的東西都能像錢一樣讓所有人都喜歡，它也有自己的優缺點。

　　優點：相容性支援所有瀏覽器(Webkit核心的瀏覽器,要加上

-webkit-)，可以隨使用者的喜好進行調節，可以將任何一個容器指定為Flex佈局。

　　缺點：因為彈性佈局可調節，所以有巨大的可能性，需要花很多的時間進行調整；有些彈性設計要為IE6單獨設計樣式，不過……IE6還有多少人在用( ⊙﹏⊙)b。

　　

注意：當我們使用了彈性佈局，那麼在CSS裡的float、clear和vertical-align就會失效。

二、  彈性佈局的屬性

　　

首先是作為彈性佈局的容器的屬性。 　　

　　

1.flex-direction屬性

 

　　flex-direction決定了容器的方向。

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

　　四個值分別為：row(預設值)從左到右、row-reverse從右向左、column從上到下、column-reverse從下到上。

 

　　

2.flex-wrap屬性

 

　　預設情況下的佈局一般在同一行，當設定了flex-wrap屬性之後將自動將排列不下的內容進行換行。

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

　　四個值分別為：nowrap(預設值)不換行、wrap向下換行、wrap-reverse向上換行。

 

　　

3.flex-flow屬性

 

　　flex-flow屬性是以上兩種屬性的簡寫形式，預設值是

row nowrap。

div {
  flex-flow: <flex-direction> || <flex-wrap>;
}

　　

　　

4.justify-content屬性

# 

#　　justify-content屬性定義了在容器方向上的對齊方式。

div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　　

flex-start(預設值)：向左對齊。

　　flex-end：向右對齊。

　　center： 居中對齊。

　　space-between：兩端對齊，每個子元素等距離間隔，子元素與容器邊框無間隔。

　　

space-around：每個子元素兩側的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍。

 

　　

5.align-items屬性

 

　　align-items屬性定義在垂直容器方向上的對齊方式。

div {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

　　

flex-start：垂直方向的起點對齊。

　　flex-end：垂直方向的終點對齊。

　　center：垂直方向的中點對準。

　　baseline: 與第一個子元素中文字的基線對齊。

　　

stretch(預設值)：如果子元素沒有設定高度或高度設為auto，那麼它將佔滿整個容器的高度。

 

　　

6.align-content屬性

 

　　align-content屬性定義了子元素兩種方向上的對齊方式。

div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

 

　　下面就是具有弹性布局容器中子元素的属性

　　1.order属性

 

　　order属性定义了子元素的排列顺序，数值小的在前。

 

.son {
  order: <integer>;
}

 

　　

　　2.flex-grow属性

 

　　flex-grow属性定义了子元素的放大比例，默认值为0。

.son {
  flex-grow: <number>; /* default 0 */}

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

　　

　　3.flex-shrink属性

 

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

.son {
  flex-shrink: <number>; /* default 1 */}

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

　　

　　4.flex-basis属性

 

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

　　

　　5.flex属性

 

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

 

　　6.align-self属性

 

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

.son {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

　　auto：預設值，表示預設繼承父級的align-items屬性。

　　flex-start：垂直方向的起點對齊。

　　flex-end：垂直方向的終點對齊。

　　center：垂直方向的中點對準。

　　baseline: 與第一個子元素中文字的基線對齊。

　　stretch(預設值)：如果子元素沒有設定高度或高度設為auto，那麼它將佔滿整個容器的高度。

        flex佈局（彈性佈局） 

      1.容器具備的屬性有：flex-dirction:(決定主軸的方向)（即項目排列方向） 取值:row/row-reverse/column/column-reverse/ flex-wrap:（如果一條軸線排不了，如何換行） 取值：nowrap（預設）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。 flex-flow :（flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap） justify-content:(justify-content屬性定義了項目在主軸上的對齊方式。) 取值：flex-start（預設值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。 space-around：每個項目兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。 align-items (交叉軸上如何對齊) 取值:flex-start/flex-end/center/baseline/stretch align-content(定義了多根軸線的對齊方式。如果專案只有一條軸線，該屬性不起作用) 取值： flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（預設值）：軸線佔滿整個交叉軸。                                                                                                       2.項目的屬性： order屬性定義項目的排列順序。數值越小，排列越前，預設為0 flex-grow屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大flex-shrink屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目將會縮小。 flex-basis專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大 小。 flex align-self 讓單一項目有與其他項目不一樣的對齊方式，可涵蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬 性，如果沒有父元素，則等同於stretch。

以上是彈性佈局（Flex佈局）的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！