## grid布局 一維，即Flex這種的，適用于一行內的布局。 二維，即可以把一個元素放置在生成的平面上的任何位置。 Grid布局能使html和css樣式完全分離，你元素的所處的渲染位置將再也不會受到其在html文檔所處位置的影響。 網格容器(Grid Container)屬性 - display - grid-template-columns - grid-template-rows - grid-template-areas:grid布局能讓html和css真正做到完全分離 - grid-template 撒 集合屬性？你想把自己搞暈？重來不用 嗯 pass - grid-column-gap - grid-row-gap - grid-gap 這個集合屬性可以有 外部邊緣不有這個間距 justify：行，align：列 start/end/center/stretch 每個單元格內部富余空間的管理 - justify-items - align-items 你的網格合計大小可能小于其 網格容器(grid container) 大小 start/end/center/stretch/space-around/space-between/space-evently - justify-content - align-content  - grid-auto-columns - grid-auto-rows - grid-auto-flow - grid 網格項(Grid Items)屬性 - grid-column-start - grid-column-end - grid-row-start - grid-row-end grid-column: 5; 等價于5/6 - grid-column - gird-row - grid-area - justify-self - align-self --- ## Flex布局 伸縮，彈性布局 - flex-flow direction+wrap的復合屬性 - flex-direction 橫向還是縱向排列 row默認|column|row-reverse|column-reverse - flex-wrap 換不換行 nowrap默認|wrap（換行）|nowrap-reverse|wrap-reverse - jutify-content justify沿著主軸進行富余空間分配 flex-start默認|flex-end|center|space-between|space-around|space-evenly - align-content stretch|flex-start|flex-end|space-between|space-around|space-evenly - align-items stretch|flex-start|flex-end|center - align-self 對某項單獨進行設置 - order 默認order為0 多個相同order以box標簽定義順序來決定order - flex-grow flex-grow 默認為0 會保持原來大小 1以上就會被富余空間填充,把富余空間按分數分后填充進對應item - flex-shrink 1 默認值 當空間不夠允許壓縮 如果nowrap又不允許壓縮就會讓父容器出現滾軸 flex-shrink:n 其中n是壓縮總大小分成n+x+..份后 的 n分 - flex-basis auto 默認自適應內容大小 - flex flex 是 flex-grow，flex-shrink和flex-basis的縮寫，auto等價于1 1 auto,none等價于0 0 auto --- >原文: [https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html](https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html) [TOC] - 對于flex盒模型的設計期望 - 主軸和側軸 - FFC(flex formatting context) - 與BFC的細微區別 - flex item(flex 子元素) - flex-item-size 如何計算的 - 隱藏屬性對items-size的影響 - 關于position:absolute 對item影響 - flex-basis、flex-grow、flex-shrik 以及相應的計算 - max-width[height]情況下flex-grow的計算流程 - min-width[height]情況下flex-shrink的計算流程 ## 對于flex盒模型的設計期望 flex盒模型是被期望設計成: - 在任何流動的方向上（包括上下左右）都能進行良好的布局 - 可以以逆序 或則 以任意順序排列布局 - 可以線性的沿著主軸一字排開 或則 沿著側軸換行排列 - 可以彈性的在任意的容器中伸縮大小 - 可以使子元素們在容器主軸方向上 或則 在容器側軸方向上 進行對齊 - 可以動態的 沿著主軸方向 伸縮子級的尺寸，與此同時保證父級側軸方向上的尺寸 ## 主軸和側軸 flex布局主要靠兩個軸 主軸和側軸 每一根軸都包括三個東西：維度、方向、尺寸 - 維度 所謂的 維度 實際上就是指子元素時橫著還是豎著排（x or y?） - 方向 方將 即排列子元素的順序 是順序還是逆序 - 尺寸 每一個子元素在主軸方向所占的位置的總和，如果主軸是水平的，那么尺寸就是父元素內所有item的outerWidth總和，如果主軸是垂直的，那么尺寸就是父元素的outerHeight 主軸是依靠`flex-direction`和所有子元素在主軸方向上的`item-size`的總和確定的，`flex-direction`這個屬性可以控制子元素的排列方向和排列順序。 側軸是依靠`flex-wrap`和 所有子元素在主軸方向上的`item-size`的總和確定的，`flex-wrap`可以控制子元素 在側軸方向上的排列方式以及順序。 而關于不同種類不同情況下的`item-size`我們會在下面套路，現在您可以簡單將它理解為`width[height]`。  為了方便 `flex-direction`和`flex-wrap`合并成了一個屬性`flex flow` 通過這個簡單而復雜的屬性，我們就能控制所有子元素的水平和垂直反向，逆序排列和順序，換行和不換行 主側軸的切換十分簡單，當主軸設定的時候，它的垂直面，就默認被設定成了側軸。如： ``` flex-flow:row-reverse wrap-reverse ``` 這條css屬性能夠告訴我們哪些信息? - 子元素是橫著排列的，主軸是水平的橫軸，側軸是豎直的縱軸 - 子元素時逆序并沿著主軸排列的，從右往左 - 子元素是換行的 - 子元素是逆序并沿著側軸排列的，從下到上 默認值 與 關鍵值值 flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '> 如果縮寫「flex: 1」, 則其計算值為「1 1 0%」 如果縮寫「flex: auto」, 則其計算值為「1 1 auto」 如果「flex: none」, 則其計算值為「0 0 auto」 如果「flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值 flex-grow：<number> flex-grow：0 flex-shrink：<number> flex-shrink：1 flex-basis：<length> | <percentage> | auto | content 默認值 flex-basis：auto <length>： 用長度值來定義寬度。不允許負值 <percentage>： 用百分比來定義寬度。不允許負值 auto： 無特定寬度值，取決于其它屬性值 content： 基于內容自動計算寬度 flex-flow：<' flex-direction '> || <' flex-wrap '> flex-direction：row | row-reverse | column | column-reverse 默認:row align-content：flex-start | flex-end | center | space-between | space-around | stretch 默認值:stretch align-items：flex-start | flex-end | center | baseline | stretch 默認值:stretch align-self：auto | flex-start | flex-end | center | baseline | stretch 默認值:auto justify-content：flex-start | flex-end | center | space-between | space-around 默認值 ：flex-start order：<integer> 默認值0，可以為負值