Flex:justify-content

justify-content　项目在主轴上的对齐方式

  • flex-start (默认)　左对齐
 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                 justify-content: flex-start;
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>

  • flex-end　右对齐

  • center　居中对齐

  • space-between　两端对齐

  • space-around　项目两侧间隔相等对齐

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