早之前有所了解,现在有时间整理一下,跟大家分享学习。
虽然Flex布局09年就被W3C所提出,但是目前浏览器支持上还不是很好,网上找的一张图片,仅供参考:

我们先从简单讲起。如果仅仅只想实现一个栅格布局,没必要引入一个复杂的框架(如bootstrap),短短几行代码也能实现该功能。
例子:有个父div,三个子div,宽度比是1:2:1,以下代码:
<!DOCTYPE html><html><head>
<title></title>
<style>
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex{
display:flex;
}
&n

