dislpay:flex详解

来源：互联网发布：mac chrome 全屏编辑：程序博客网时间：2024/06/14 15:07

容器的属性：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           #div{
               display: flex;
               width: 800px;
               height: 200px;
               background: bisque;
           }
           .div{
               width: 213px;
               height: 45px;
               background: sandybrown;
               border-right: 2px solid paleturquoise;
               border-bottom: 2px solid aliceblue;
           }
       </style>
   </head>
   <body>
       <div id="div">
           <div class="div">
               q1
           </div>
           <div class="div">
               q2
           </div>
           <div class="div">
               q3
           </div>
           <div class="div">
               q4
           </div>
           <div class="div">
               q5
           </div>
           <div class="div">
               q6
           </div>
           <div class="div">
               q7
           </div>
       </div>
   </body>
</html>

1、flex-direction: row-reverse;

2、flex-direction: row;

3、flex-direction: column;

4、flex-direction: column-reverse;

5、flex-wrap: nowrap;

6、flex-wrap:wrap-reverse ;

7、flex-wrap: wrap;

0 0