Flex:flex-direction

flex-direction　项目排列方向

  • row(默认)：　水平方向，起点在左
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box{
 8                 width: 500px;
 9                 height: 200px;
10                 border: 1px solid #999;
11                 margin: 0 auto;
12                 display: flex;
13                 flex-direction: row;
14             }
15             .box div{
16                 width: 100px;
17                 height: 100px;
18                 border: 1px solid red;
19             }
20         </style>
21     </head>
22     <body>
23         <div class="box">
24             <div>1</div>
25             <div>2</div>
26         </div>
27     </body>
28 </html>

  • row-reverse：水平方向，起点在右

  • column：垂直方向，起点在上

  • column-reverse：垂直方向，起点在下

posted @ 2021-10-28 21:02  十七日尾  阅读(119)  评论(0)    收藏  举报