说到页面布局，无外乎水平垂直，先说说水平，最开始使用最多的是float属性，但是它有后遗症，塌陷呀清除呀，最后放弃转战flex。需要谨记的是，flex是设置在需要生效的元素的父元素上面的。
display: flex; flex-direction: row/column; 其中row为水平布局，column是垂直布局。如果希望定义与direction同方向上的属性状况，用just-content，如果定义与direction垂直方向上的属性状况用align-items。
控制水平布局的显示比例，基于父元素的宽度，可以用百分比控制，也可以在子元素上用flex属性，都是1，则各占50%。一个1，一个2则一个占33%，另一个占66%，以此类推。
在其中的一个或几个高度或者宽度确定的情况下，希望剩下的那个充满父元素的空间，可以在该元素上增加 flex: 1; 的属性。
垂直布局，高度一般根据自身内容自动填充。有个特殊需求那就是希望元素高度占满可视窗口，
在html和body标签同时设定min-height: 100%; 相当于继承了window的高度，对高度设定百分比，必须之前有被定义过的高度。
用绝对定位上下左右均为0的方式，绝对定位的高度可以被继承。
在外层的某处有个用100vh相关定义的高度，可以在想要占满到剩下范围的地方定义display: flex; flex-direction: column 然后里面只有一个子元素(direction可以不设置，默认direction为row，align-items为stretch可以达到同样效果)。也可以用在定义了高度的父元素之后，用height: inhert去层层继承。