Flex布局講解

彈性盒模型

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

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

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

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

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

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

舊：display：box ;子元素佔的份數box-flex

.main
.main div
.main div:nth-child(2)
複製**

1、box-orient

box-orient(orient譯為排列更準確)用來確定父容器裡子容器的排列方式，是水平還是垂直 horizontal | vertical

2、box-direction

box-direction用來確定父容器裡的子容器排列順序，具體屬性如下**所示：

normal | reverse

3、box-align

box-align表示父容器裡面子容器的垂直對齊方式，可選引數如下所示： start | end | center | baseline | stretch

4、box-pack

box-pack表示父容器裡面子容器的水平對齊方式，可選引數如下所示： start | end | center | justify

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

.main
.main div
class="main">
div>
div>
div>
div>
複製**

彈性父元素屬性

flex-direction

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

· row：橫向從左到右排列(左對齊)，預設的排列方式。 · row-reverse：反轉橫向排列(右對齊，從後往前排，最後一項排在最前面。 · column：縱向排列。 · column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面.

複製**

justify-content

justify-content內容對齊(justify-content)屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線(main axis)對齊

· flex-start：彈性專案向行頭緊挨著填充。這個是預設值。第乙個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。 · flex-end：彈性專案向行尾緊挨著填充。第乙個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。 · center：彈性專案居中緊挨著填充。(如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位)。 · space-between：彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分布在該行上，相鄰專案的間隔相等。 · space-around：彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項，則該值等同於center。否則，彈性專案沿該行分布，且彼此間隔相等(比如是20px)，同時首尾兩邊和彈性容器之間留有一半的間隔(1/2*20px=10px)。

複製**

align-items

align-items設定或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。

· flex-start：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。 · flex-end：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。 · center：彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度)。 · baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。 flex-wrap 屬性 flex-wrap 屬性用於指定彈性盒子的子元素換行方式。 · nowrap - 預設，彈性容器為單行。該情況下彈性子項可能會溢位容器。 · wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行 · wrap-reverse -反轉 wrap 排列。

複製**

align-content

align-content屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。

· stretch - 預設。各行將會伸展以占用剩餘的空間。 · flex-start - 各行向彈性盒容器的起始位置堆疊。 · flex-end - 各行向彈性盒容器的結束位置堆疊。 · center -各行向彈性盒容器的中間位置堆疊。 · space-between -各行在彈性盒容器中平均分布。 · space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

複製**

彈性子元素屬性flex-grow定義彈性盒子元素的擴充套件比率。

.main
div:nth-child(1)
複製**

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

· auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。 · flex-start：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。 · flex-end：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。 · center：彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度)。 · baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。 · stretch：如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

複製**

**查詢：

@media only screen and (min-width: 340) 
}@media only screen and (min-width: 340px) and (max-width: 640px) 
}@media only screen and (min-width: 640px) and (max-width: 740px) 
}複製**

如何識別手機尺寸通過設定meta語句

· · device-width 裝置螢幕解析度的寬度值
· initial-scale 設定頁面初始縮放比例(0-10.0)
· minimum-scale 設定最小縮小比例(0-10.0)
· maximum-scale 設定最大放大比例(0-10.0)
· user-scalable 設定使用者是否可以縮放(yes/no)
複製**

Flex布局講解

超詳細的Flex布局講解

flex布局 Flex布局

布局（flex布局）

Flex布局講解

超詳細的Flex布局講解

flex布局 Flex布局

布局（flex布局）

相關推薦