早之前有所了解,现在有时间整理一下,跟大家分享学习。
虽然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