flex -- 布局 · 前端知識 -- 學習整理

[TOC] >[success] # 彈性盒子布局 ~~~ 1.2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局，Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性 ~~~ >[danger] ##### flex 出現解決的問題 ~~~ 1.布局的傳統解決方案，基于[盒狀模型]，依賴[`display`]屬性 +[`position`]屬性 + [`float`]屬性。 2.flex 可以更方便的實現我們想要的布局方式 3.設為 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`屬性將失效。 ~~~ * 舉個例子 ~~~ 1.現在我有四個div 我想讓它們在一行排列，效果如圖，我們能想到的方法 1.1.將塊級元素div轉化行內塊 1.2.使用浮動 1.3.使用定位 ~~~ ![](https://img.kancloud.cn/e4/71/e47147303f36eadf5b8a6c24ba24a16b_1001x56.png) * 以行內塊作為例子· ~~~html <!DOCTYPE html> <html lang="en"> <body> <div class="a">  <div>1</div><div>2</div><div>3</div><div>4</div> </div> </body> <style> .a div{ width:25%; border:1px solid red; display:inline-block; box-sizing: border-box; } </style> </html> ~~~ >[danger] ##### 做一個構想 ~~~ 1.現在讓我們單純設計，一個可以不用通過[`display`]屬性 +[`position`]屬性 +[`float`]屬性。我們要考慮他所具備的行為要有那些 1.1.可以規定元素布局形式，也就是可以設置讓其'水平行或垂直列' 1.2.可以控制在主軸上的對齊方式，如果是水平排列是居左居右，如果是垂直列是居上還是居下 ~~~ >[info] ## 真正的彈性盒子 ~~~ 1.如圖一樣需要有一個父元素(flex container)，父元素內部子元素叫'flex items' 2.子元素可以按照'main axis'(from main-start to main-end) 或'cross axis'(from cross-start to cross-end)進行布置， 'main axis'主軸、'cross axis' 交叉軸，主軸的開始位置結束位置分別是'main-start'、'main-end',交叉軸的開始位置結束位置'cross-start'、'cross-end' ~~~ ![](https://img.kancloud.cn/c5/55/c555a7761831d15e21b170b6ce9a4620_700x346.png) ![](https://img.kancloud.cn/93/84/93843a8596cacc9af1babc215b2f8c36_678x251.png) >[info] ## 真正的彈性盒子構成 1. 開啟了 flex 布局的元素叫 **flex container** 2. flex container 里面的直接子元素叫做** flex item** ![](https://img.kancloud.cn/5b/f0/5bf02fdefd4d46b2dd01a31d3b968e4c_418x368.png) >[danger] ##### 當flex container中的子元素變成了flex item時, 具備一下特點 1. flex item的布局將受flex container屬性的設置來進行控制和布局; 2. flex item不再嚴格區分**塊級元素和行內級元素** 3. flex item默認情況下是包裹內容的, 但是可以設**置寬度和高度;** >[info] ## 彈性盒子屬性整個彈性盒子布局整體可以看做兩個部分，分別是`flex container` 彈性盒子的容器和 **flex items** 彈性盒子中的元素，因此在對應配置屬性上也都是針對二者 * 其中**flex container** 上的 CSS 屬性 1. flex-flow 2. flex-direction 3. flex-wrap 4. flex-flow 5. justify-content 6. align-items 7. align-content * 應用在 **flex items** 上的 CSS 屬性 1. flex-grow 2. flex-basis 3. flex-shrink 4. order 5. align-self 6. flex >[info] ## 彈性盒子的使用 ~~~ 1.需要定義其父級為一個彈性盒子 -- 'display: flex' 2.可以在父級設置屬性規定其內部子元素橫縱軸排列方向 -- 'flex-direction' 3.可以在父級設置換行即排列子元素換行，默認情況下，項目都排在軸線 -- 'flex-wrap' 4.可以在父級設置內部子元素在主軸的對齊方式也就是'main-start'、'main-end'、'cross-start'、'cross-end' -- 'justify-content' 5.可以在父級設置內部子元素整側軸對齊 -- 'align-items' 6.可以設置多個多根軸線側軸對齊如果項目只有一根軸線，該屬性不起作用 -- 'align-content' ~~~ * 注說明設置 display 屬性為**flex** 或者 **inline-flex** 可以成為 **flex container**，區別就是設置**flex**的 flex container 以塊形式存在，**inline-flex**的 flex container 以行內塊形式存在 >[danger] ##### 設置彈性盒子 ~~~ 1.在父元素'flex container' 設置屬性'display: flex' 或者'display: inline-flex;' ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <body> <div class="outter"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> <style> .outter { display: flex; /* 設置彈性盒子為行內塊 */ /* display: inline-flex; */ } .outter div{ border:1px solid red; box-sizing: border-box; height:25% } </style> </html> ~~~ >[danger] ##### 軸排列方向 -- 'flex-direction' **flex items** 默認都是沿著 **main axis**（主軸）**從 main start 開始往 main end** 方向排布，因此即可設置四個方向依次是，默認主軸從左到右，從右到左，將交叉軸設置為主軸，從上到下和從下到上 ![](https://img.kancloud.cn/0c/db/0cdba9fee74536d8bed1432ee4e8978c_473x218.png) ~~~ 1.設置'flex item' 在元素中的排列方向設置屬性'flex-direction: row | row-reverse | column | column-reverse;' 依次表示'主軸為水平方向，起點在左端（橫向正序）'、'主軸為水平方向，起點在右端（橫向倒敘）' '主軸為垂直方向，起點在上沿。（縱向正序）'、'主軸為垂直方向，起點在下沿（縱向倒敘）' ~~~ * 代碼案例 ~~~html <!DOCTYPE html> <html lang="en"> <body> <div class="outter"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> <style> .outter { display: flex; /* 縱向反序 */ flex-direction: column-reverse; } .outter div{ width:25%; border:1px solid red; box-sizing: border-box; } </style> </html> ~~~ >[danger] ##### 換行 -- flex-wrap ~~~ 1.默認情況下，項目都排在一條線（又稱"軸線"）上，簡單的說你不讓他換行他會一直在這個軸線無限排列 2.' flex-wrap: nowrap | wrap | wrap-reverse;','nowrap（默認）：不換行'、'wrap：換行，第一行在上方'、 'wrap-reverse：換行，第一行在下方' ~~~ ![](https://img.kancloud.cn/95/d9/95d9e6c8c091b42fff88d88682b95ab1_729x366.png) * 使用阮一峰老師的圖 ![](https://img.kancloud.cn/38/21/3821b3f9d6c9b2ae6f82d9a16c8fd6a3_917x867.png) ~~~html <!DOCTYPE html> <html lang="en"> <body> <div class="outter"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> <style> .outter { display: flex; /* 如果不加這個屬性五個div即使你下面設置一個占25%他依舊是五個都在一行 */ flex-wrap: wrap; } .outter div{ width:25%; border:1px solid red; box-sizing: border-box; } </style> </html> ~~~ >[danger] ##### flex-flow -- 屬性是 flex-direction 和 flex-wrap 的簡寫 ~~~ 1.flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。順序任何, 并且都可以省略; ~~~ >[danger] ##### justify-content --- 設置主軸排列 * **justify-content 決定了 flex items 在 main axis**上的對齊方式 ~~~ 1.'justify-content'控制的是主軸('main axis')方向排列子容器 2.'justify-content: flex-start | flex-end | center | space-between | space-around;|space-evenly' 2.1. flex-start（默認值）：與 main start 對齊 2.2. flex-end：與 main end 對齊 2.3. center：居中對齊 2.4. space-between：flex items 之間的距離相等，main start、main end兩端對齊 2.5. space-around：flex items 之間的距離相等，flex items 與 main start、main end 之間的距離是 flex items 之間距離的一半 2.6.space-evenly：flex items 之間的距離相等，flex items 與 main start、main end 之間的距離等于 flex items 之間的距離 ~~~ ![](https://img.kancloud.cn/77/86/7786532f7cfe6ca90f4e0a0b06743302_725x234.png) ![](https://img.kancloud.cn/32/a6/32a6b410a5ba459043cff2242cd44a25_467x750.png) ~~~ <!DOCTYPE html> <html lang="en"> <body> <div class="outter"> <div>1</div> <div>2</div> <div>3</div> </div> </body> <style> .outter { display: flex; justify-content: center; } .outter div{ width:25%; border:1px solid red; box-sizing: border-box; } </style> </html> ~~~ >[danger] ##### align-items -- 交叉軸 * **align-items 決定了 flex items 在 cross axis** 上的對齊方式 ~~~ 1.相比'justify-content' ,'align-items' 負責的是交叉軸也就是'cross axis' 的位置 2.'align-items: flex-start | flex-end | center | baseline | stretch;' 2.1. flex-start：與 cross start 對齊 2.2. flex-end：與 cross end 對齊 2.3. center：居中對齊 2.4. baseline：與基準線對齊 2.5. stretch：當 flex items 在 cross axis 方向的 size 為 auto 時（即沒設置指定寬度），會自動拉伸至填充 flex container 2.6. normal：在彈性布局中，效果和stretch一樣 ~~~ ![](https://img.kancloud.cn/09/32/0932586bb9ced60f8a0a38e0a67cd02e_700x381.png) ![](https://img.kancloud.cn/45/98/459851dc8c8adce4b24e4c1c7deeb412_579x594.png) ~~~html <!DOCTYPE html> <html lang="en"> <body> <div class="outter"> <div>1</div> <div>2</div> <div>3</div> </div> </body> <style> .outter { display: flex; align-items: center; } .outter div{ width:25%; border:1px solid red; box-sizing: border-box; } </style> </html> ~~~ >[danger] ##### align-content -- 多行沿交叉軸對齊 * **align-content 決定了多行 flex items** 在 cross axis 上的對齊方式，用法與 justify-content 類似 ~~~ 1如果項目只有一根交叉軸，該屬性不起作用。理解成必須多行這個屬性才生效，必須flex 父容器設置高度 2.' align-content: flex-start | flex-end | center | space-between | space-around | stretch;' ~~~ ![](https://img.kancloud.cn/39/af/39aff06055e5b99c42200e6fba9e698a_557x290.png) ![](https://img.kancloud.cn/ef/ef/efef75332ff7c5d6dce9c2ebea916b0d_472x640.png) >[info] ## flex-items 設置的屬性 ~~~ 1.剛才是給父容器設置彈性盒子規定內部排列效果，每個單獨項也是可以做單獨配置，可配置的屬性有 'order'、'flex-grow'、'flex-shrink'、'flex-basis'、'flex'、'align-self' ~~~ >[danger] ##### align-self屬性 * **flex items 可以通過 align-self 覆蓋 flex container** 設置的 align-items ~~~ 1. `align-self`屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋`align-items`屬性。默認值為`auto`，表示繼承父元素的 `align-items`屬性，如果沒有父元素，則等同于`stretch`。 2. auto（默認值）：遵從 flex container 的 align-items 設置`stretch、flex-start、flex-end、center、baseline`，效果跟 align-items 一致 3. flex items 擴展后的最終 size 不能超過 max-width\\max-height ~~~ ![](https://img.kancloud.cn/e8/8f/e88f2ba80f5d4a35025733d29f6b2639_743x390.png) >[danger] ##### order屬性定義項目的排列順序 ~~~ 1.每個item 默認排序值為0，可以通過改變排序數值來影響他們排序的位置，數字越小越靠前 ~~~ ![](https://img.kancloud.cn/da/e0/dae0f894c9d84eda119dd42ec1a54028_508x414.png) >[danger] ##### flex-grow 項目的放大比例 ~~~ 1.可以設置每個item 占比大小默認為0，即如果存在剩余空間，也不放大 2. 當 flex container 在 main axis 方向上有剩余 size 時，flex-grow 屬性才會有效 ~~~ ![](https://img.kancloud.cn/88/af/88af850095b991b555c9c79f70d8275c_490x264.png) * 對于默認0的解釋如圖，即使有剩余空間其他的不會頂開 ![](https://img.kancloud.cn/99/26/99264783af91e52def9cd46243fca044_721x75.png) * 修改了第一塊的flex-grow 為1則自動撐開 ![](https://img.kancloud.cn/cd/25/cd25b4760689401bf8c17c2d44ede947_567x84.png) >[danger] ##### flex-shrink縮小比例 ~~~ 1.如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小負值對該屬性無效,簡單說當 flex items 在 main axis 方向上超過了 flex container 的 size，flex-shrink 屬性才會有效 2. flex items 收縮后的最終 size 不能小于 min-width\\min-height ~~~ >[danger] flex屬性 ~~~ 1. `flex`屬性是`flex-grow`,`flex-shrink`和`flex-basis`的簡寫，默認值為`0 1 auto`。后兩個屬性可選。 1.1. 第一個值必須為一個無單位數，并且它會被當作的值。 1.2. 第二個值必須為一個無單位數，并且它會被當作的值。 1.3. 第三個值必須為一個有效的寬度值，并且它會被當作的值 ~~~ * 注：flex-basis 用來設置 flex items 在 main axis 方向上的 base size >[danger] ##### 內容參考 [# Flex 布局教程：語法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) [# A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) [ 一款通過游戲讓你學會flexbox的網站，一共24關 ](http://flexboxfroggy.com/) https://juejin.cn/post/6844903474774147086 -- 二次糾正重看 [后續看](https://blog.csdn.net/cc18868876837/article/details/88138057)