flex布局--实用

等高布局

效果：父元素的高由子元素决定，且每个子元素的高都是相同的

实现：

效果：一行有两个子元素，分别在左边和右边，其中间的间距自动计算

效果：两行或一行宽度固定，其中一行宽度自动计算

实现：只需要给需要自动计算的那一个子元素添加，flex-grow: 1

效果：footer 在没有滚动条时，一直在视口底部，有滚动条时，则视口滚动到底部才能看到底部

实现：假设页面有三层，分别为 header 、 main 、 footer ，则给 main 添加 flex-grow: 1，让其自动撑开

效果：子元素超出父元素宽度

通过子元素设置 flex-shrink: 0 实现