容器的属性：
<!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;
