前端CSS Flex布局8大重难点知识，收藏起来吧

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex布局将成为未来布局的首选方案。这也是学习前端必须掌握的主流布局方案！今天给大家分享一下Flex布局的8大重难点知识。

1. Flex实现两栏布局(左固定，右自适应)；
2. Flex实现三栏布局(左右固定，中间自适应)；
3. Flex实现元素水平垂直居中；
4. flex 怎么实现盒子 1 在最左边，2 、3 在最右边；
5. 如何解决 flex 布局 7 个元素使用 space-between 最后一行两边分布的问题？
6. flex 实现 8 个元素分两行排列 每行 4 个平均分布-自适应；
7. flex 画3色子；

1、Flex实现两栏布局(左固定，右自适应)

给父元素加上display:flex; // 设为弹性布局

子项.left设置固定宽width:300px