## 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，可以为负值