CSS Flex佈局完全指南 #flight.Archives002
Title/CSS Flex佈局完全指南 #flight.Archives002
序(from Ruanyf) :
網頁佈局（layout）是 CSS 的一個重點應用.
佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性. 它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現
2009年，W3C 提出了一種新的方案 - Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局.
Tag/Flex介紹
.container{
display:flex; /*or inline-flex*/
}
設定了.container元素為Flex容器(Flex container),.container的直接子元素被稱為Flex專案(Flex item)
Flex元素按照主軸(main-axis)的方向排列,交叉軸(cross-axis)與主軸垂直
主軸的開始和結束被稱為 main start 和 main end
交叉軸的開始和結束被稱為 cross start 和 cross end
Tag/容器(flex container)屬性
| 屬性 | 可取值 | 說明 |
|---|---|---|
display |
flex,inline-flex |
指定一個容器是否啟用Flex佈局 |
flex-direction |
row,row-reverse,column,column-reverse |
指定主軸(main-axis)的方向 |
flex-wrap |
nowrap,wrap,wrap-reverse |
指定內容超出一行情況的換行方式 |
flex-flow |
<flex-direction> || <flex-wrap> |
CSS簡寫屬性 |
justify-content |
flex-startflex-end,center,space-between,space-around |
指定專案在主軸(main-axis)上的對齊方式 |
align-items |
flex-start,flex-end,center,baseline,stretch |
指定專案在交叉軸(cross-axis)上的對齊方式 |
align-content |
flex-start,flex-end,center,space-between,space-around,stretch |
同時指定專案在兩根軸線上的對齊方式(如果專案只有一根軸線.該屬性不起作用) |
Tag/專案(flex item)屬性
| 屬性 | 可取值 | 說明 |
|---|---|---|
order |
指定專案的排列順序,預設值為0,order相同時按照專案在DOM中的順序排序 |
|
flex-grow |
指定專案大小的比例,預設值為0,width屬性會優先指定flex-item的最小大小 |
|
flex-shrink |
指定專案大小在單行空間不足時的收縮比例,預設值為1 | |
flex-basis |
指定專案在主軸方向上的初始大小 | |
flex |
<'flex-grow'> <'flex-shrink'> <'flex-basis'> | CSS簡寫屬性 |
align-self |
auto,flex-start,flex-end,center,baseline,stretch |
指定單個元素的對齊方式,優先順序高於align-items屬性 |
->> Details
Flex 屬性的值 (from MDN)
/* 關鍵字值 */
flex: auto;
flex: initial;
flex: none;
/* 一個值, 無單位數字: flex-grow */
flex: 2;
/* 一個值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 兩個值: flex-grow | flex-basis */
flex: 1 30px;
/* 兩個值: flex-grow | flex-shrink */
flex: 2 2;
/* 三個值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全域性屬性值 */
flex: inherit;
flex: initial;
flex: unset;
->> Demos
詳見MDN,Codepen
->> See also
Flex Bugs https://github.com/philipwalton/flexbugs
Flexbox Properties Demonstration https://codepen.io/justd/full/yydezN/
->> Reference link
MDN中文文件 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox
MDN 英文文件 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
CodingStartUp https://www.bilibili.com/video/BV1qJ411N7TA
CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Scotch.io https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
->> 文件版本&更新記錄
現在版本為V1.0
詳見 Github(@flightmakers)