CSS布局之flexbox

参考链接：

https://www.cnblogs.com/qingchunshiguang/p/8011103.html

 

练习代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .container{
        background-color: orange;
        width:300px;
        height:300px;
        display:flex;
        justify-content:space-between;
        align-items: center;
      }
      .div1{
        background-color: red;
        width:100px;
        height:100px;
      }
      .div2{
        background-color: blue;
        width:100px;
        height:100px;
      }
      .div3{
        background-color: green;
        width:100px;
        height:100px;
      }

    </style>
  </head>
  <body>
    <div class="container">
      <div class="div1">

      </div>
      <div class="div2">

      </div>
      <div class="div3">

      </div>
    </div>

  </body>
</html>

 

posted @ 2019-11-19 15:41  liuw_flexi  阅读(197)  评论(0)    收藏  举报