flex的各種布局

2022-10-11 17:30:18 字數 4218 閱讀 8648

flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。任何乙個容器都可以指定為flex布局。

#box
一：有六個屬性設定在box父容器上，來控制子元素的顯示方式；分別是：

flex-direction    設定主軸對齊方式  預設 row  x軸從左到右；

flex-wrap   子元素換行的方式  預設nowrap ；

flex-flow   flex-direction和flex-wrap的簡寫 預設row nowrap；

justify-content  子元素的對齊方式  預設flex-start  左對齊

align-items   

align-content

1、flex-direction 決定主軸的對齊方向，分別有四個屬性：       

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

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

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

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

例如上面**，主軸就是x軸橫向的；起點在左端，從左到右排列；

2.  flex-wrap ：定義子元素超過一行，如何換行，分別有三個屬性：

nowrap（預設值）：預設不換行。   

wrap：換行，第二行在第一行下面，從左到右

wrap-reverse：換行，第二行在第一行上面，從左到右；

2.1  nowrap：不換行，如果子元素超過父元素的寬度或者高度，會自動在主軸方向壓縮

下面的例子，主軸是x軸，預設不換行，但是父元素的寬度是500，子元素明顯大於父元素寬度，會預設寬度變窄；

2.2  wrap：換行，正常的折行          

2.3 wrap-reverse  第二行在第一行上方；        

3. flex-flow:是flex-direction 和flex-wrap的簡寫形式，預設是 row  nowrap

flex-flow：flex-direction|flex-wrap ；
4. justify-content:  子元素在主軸對齊方式

flex-start（預設值）：左對齊

flex-end：右對齊

center： 居中

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

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

flex-start和flex-end，center這三個都比較簡單，主要區分開下面的space-between和space-around；

space-between：兩端對齊

5  align-items：交叉軸如何對齊，如果flex-direction：row和row-reverse  那麼交叉軸就是y軸，如果是column和column-reverse那麼交叉軸是x軸

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

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

center：交叉軸的中點對齊。

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

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

baseline:以第乙個子元素文字的基線對齊

stretch:子元素不設定高度，那麼高度將沾滿整個父元素

6. align-content:屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

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

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

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

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

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

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

order

flex-grow

flex-shrink

flex-basis

flex

align-self

1.  order  子元素排列的位置預設是按照html先後順序來排列的，html結構誰在前面預設就排列在前面；order的作用就是改變子元素排列順序

order：預設（0） 值越小越靠前， 

2.flex-grow  放大比例  預設是0   當有放大空間的時候，值越大，放大的比例越大

3.flex-shrink:縮小比例  預設是1  值越大，縮小的時候比例越小；

.inner:nth-child(5)
4.flex-basis  屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。 

廣州設計公司

我的007辦公資源**

flex-basis：200px  ，如果專案有多餘的空間，設定為200px。那麼會放大到200的寬度；

5. flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

6.align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

.item
除了auto是表示繼承父元素，其他的跟align-items是一樣的。

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

布局（flex布局）

彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...

flex 平鋪布局 Flex 布局教程

網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...