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>
