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