万事一转flex完事
这篇文章不会过多关注代码，而是会着重于什么时候使用上述三种布局方式。
流式——顺流而下
流式布局，顾名思义，使用这种布局方式更多是以信息流的方式向读者传达信息。当页面信息主体的结构是递进式时使用它刚好。比如这篇文章的结构便是由表达信息点的流式，到表达一维信息的Flex，再到表达二维信息的Grid，最后到实践总结的递进式结构。
Flex——元素间的互动
Flex布局，翻译为弹性盒。当你拥有一个到多个并列的元素需要展现时便可以考虑使用Flex布局，比如
掘金文本编辑器的工具栏便展示了Flex最基本的用法。
.main .bytemd .bytemd-toolbar-left, .main .bytemd .bytemd-toolbar-right {
display: flex;
}
相较于展现大段信息的流式布局，Flex更专注于展现少而精的信息或者功能。
Grid——划分区域
Grid布局，翻译为网格。这种布局一般情况下用于对页面整体进行划分。找了几个大网站没找到实例
实践！
说教无益，折断的骨头……不好意思走错片场了 还得上实例。
最外层，把握整个页面的部分使用了Grid划分各个功能区。在main区内使用Flex对多个并列的信息流进行排版，而对单个信息流则使用正常的流式布局进行渲染。
