Flex:flex-wrap

flex-wrap 当项目一行排不下时的换行方式

  • nowrap(默认)　不换行 会自动压缩项目使其能显示在一行
 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-wrap: nowrap;
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>3</div>
27             <div>4</div>
28             <div>5</div>
29             <div>6</div>
30             <div>7</div>
31         </div>
32     </body>
33 </html>

  • wrap　一排放不下的项目自动换行 第一行在上　　

  • wrap-reverse　一排放不下的项目自动换行 第一行在下

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