早之前有所了解,现在有时间整理一下,跟大家分享学习。

虽然Flex布局09年就被W3C所提出,但是目前浏览器支持上还不是很好,网上找的一张图片,仅供参考:

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

我们先从简单讲起。如果仅仅只想实现一个栅格布局,没必要引入一个复杂的框架(如bootstrap),短短几行代码也能实现该功能。

例子:有个父div,三个子div,宽度比是1:2:1,以下代码:

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

<!DOCTYPE html><html><head>
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            padding: 20px;
        }
        .flex{
            display:flex;
        }
&n
        
		

网友评论