flex两列布局

前言：flex布局，对于我来说是新事物，因为是这几年新出现的。之前还想用原来的布局，后来一想，新东西肯定能更好的解决问题，学习之后发现还真是。

原来没学，就是因为flex布局属性很多，记忆成本大，但实际上理解后，就没有那么复杂了。

最核心的就是知道flex:1是什么意思。其实是flex-grow的缩写，内如以多少方式增长。

 

最简版的页面布局如下：

.parent {

　　display: flex;

　　align-items: stretch; // 垂直方向，子元素左右等高

　　flex-flow: row wrap; // 以行排列 并且允许换行

}

.child_menu {

　　width: 256px;

}

.child_container {

　　flex: 1;

}

 

当忘记的时候：搜索一下重温一下。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://juejin.cn/post/7004622232378966046