Flex布局介紹

2021-08-06 04:51:36 字數 1967 閱讀 5361

flex 是 flexible box 的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性

任何乙個容器都可以指定為 flex 布局。

.box
行內元素也可以使用 flex 布局。

.box
注意，設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。

1.flex-direction屬性決定主軸的方向（即專案的排列方向）。

.box
2 flex-wrap屬性預設情況下，專案都排在一條線上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.box
3 flex-flow(常用屬性)

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

4 justify-content屬性(常用屬性)

justify-content屬性定義了專案在x軸上的對齊方式。

.box
5 align-items屬性（y軸）(常用屬性)

align-items屬性定義專案在交叉軸上如何對齊。

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

1 order屬性(常用屬性)

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。

2 flex-grow屬性（比例屬性）

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

3 flex-shrink屬性

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

值大於等於0，0代表不縮小，其他的當空間不足時按比例比例縮小

4 flex-basis屬性

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

5 flex屬性(常用屬性)

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

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

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

6 align-self屬性（y軸）(常用屬性)## 標題 ##

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

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

flex布局詳情介紹

任何的屬性值加上 reverse 表示顛倒順序 webkit核心的瀏覽器 需要加上 webkit 字首 1.flex direction row 預設子元素在父元素上從左向右排列 若不換行，超出元素本身的寬度則平分寬度 2.flex direction row reverse 取反，子元素在父元素上...

flex 彈性布局介紹

介紹更全面 display flex 將容器設定為彈性布局，預設是自左向右依次排列 容器屬性 flex end 靠右對齊 space between 左右兩端對齊,中間補空格，專案之間的距離是相等的 space around 專案之間的間距是左右兩側距離的2倍，也就是 1 2 2 3 space e...

彈性布局flex 介紹

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