css里flex+margin布局
- 其他
- 2025-09-03 19:12:01
css里flex+margin布局 居中两端排列依次排列
在flex+margin的布局中，margin设置auto会自动将元素剩余的空间用margin填满
居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>居中</title> <style> * { margin: 0; padding: 0; } .container { height: 500px; display: flex; border: 2px solid red; box-sizing: border-box; } .item { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: #ccc; } .item { margin: auto; } </style> </head> <body> <div class="container"> <div class="item">1</div> </div> </body> </html> 两端排列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两端排列</title> <style> * { margin: 0; padding: 0; } .container { display: flex; border: 2px solid red; box-sizing: border-box; } .item { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: #ccc; } .item:nth-child(3) { margin-left: auto; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html> 依次排列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>依次排列</title> <style> * { margin: 0; padding: 0; } .container { display: flex; flex-wrap: wrap; border: 2px solid red; box-sizing: border-box; } .item { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: #ccc; } .container .item { --n: 10; /* 计算得出左右两边的间距：元素剩余的空间 / 元素个数 / 2 */ --gap: calc((100% - 100px * var(--n)) / var(--n) / 2); margin: 20px var(--gap); } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> <div class="item">12</div> <div class="item">13</div> <div class="item">14</div> <div class="item">15</div> <div class="item">16</div> <div class="item">17</div> <div class="item">18</div> <div class="item">19</div> <div class="item">20</div> <div class="item">21</div> <div class="item">22</div> </div> </body> </html>css里flex+margin布局由讯客互联其他栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“css里flex+margin布局”
