<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ height: 100vh; display: flex; flex-wrap: wrap; /* nowrap | wrap | wrap-reverse;*/ /* flex-direction:column; 主轴 垂直 排列 起点上沿*/ /*flex-direction:column-reverse 垂直排列 起点下沿;*/ /*flex-direction: row 水平排列 起点左端;*/ /*flex-direction: row-reverse 水平排列 起点右端;*/ /*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/ /*justify-content:flex-start; x轴左对齐*/ /* justify-content:space-between; 两端对齐，项目间距相等*/ /*justify-content:flex-end; x轴右对齐*/ /*justify-content:center; x轴中间对齐*/ /*justify-content:space-around 项目两侧的间隔相等; */ /*align-items:flex-end; y轴 底部对齐*/ /*align-items:flex-start; y轴 顶部对齐*/ /*align-items: center; 中间对齐*/ /*align-items:baseline baseline: 项目的第一行文字的基线对齐。*/ /*align-items:stretch; 占满整个容器的高度*/ /*align-content: center;*/ } .item{ border: 1px solid red; } </style> </head> <body> <div class="box"> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> <span class="item">内容</span> </div> </body> </html>