flex 布局

今天看了下bootstrap v4的demo,感觉挺简洁的,https://v4.bootcss.com/docs/examples/dashboard/

看了下代码,用的flex布局,落伍了好久没看过css怎么用了,试了下感觉确实很方便:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="margin: 0;padding: 0;">
    <div style="display: flex;height: 100px;background-color: black;">
      <div style="background-color: red;width: 100px;"></div>
      <div style="background-color: blue;width: 100%;"></div>
      <div style="background-color: green;width: 100px;"></div>
    </div>
  </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Flex 布局是什么? CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexibl...
    侠客有情剑无情QAQ阅读 11,050评论 7 94
  • 转载自:http://www.ruanyifeng.com/blog/2015/07/flex-examples....
    天字一等阅读 3,785评论 0 1
  • 文章目录0. 前言1. 基础概念2. 容器属性(父属性:Properties for the Parent)2.1...
    游云deb阅读 5,674评论 0 1
  • 先来看看几种常见的布局方式 我的主要参考资料是Landon Schropp的文章和Solved by Flexbo...
    Sylvie_9459阅读 3,865评论 0 2
  • 3、贫血 危险征兆:贪睡伴面色苍白 在营养过剩的年代,虽然贫血已经比以前明显减少,但贫血仍然不少见。疲乏、困倦是贫...
    张小蛙0113阅读 9,649评论 0 1