flex 父元素属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> /* flex-direction */ /* div{ display:flex; width: 16rem; height: 8rem; background: pink; flex-direction: column-reverse; } div span{ width: 4rem; height: 2.6667rem; background: red; } */ /* justify-content */ /* div{ display:flex; width: 21.3333rem; height: 8rem; background: pink; flex-direction: row; justify-content: space-between; } div span{ width: 4rem; height: 2.6667rem; background: red; } */ /* flex-wrap */ /* div{ display:flex; width: 13.3333rem; height: 8rem; background: pink; flex-direction: row; flex-wrap: wrap; } div span{ width: 4rem; height: 2.6667rem; background: red; } */ /* align-items*/ /* div{ display:flex; width: 13.3333rem; height: 8rem; background: pink; flex-direction:row; justify-content: center; align-items:center; } div span{ width: 4rem; height: 2.6667rem; background: red; } */ /* align-content*/ /* div{ display:flex; width: 21.3333rem; height: 16rem; background: pink; flex-direction:row; flex-wrap: wrap; align-content: stretch; } div span{ width: 4rem; background: red; margin: .2667rem; } */ /* flex-flow*/ div{ display:flex; width: 21.3333rem; height: 8rem; background: pink; /* flex-direction: column; flex-wrap: wrap; */ flex-flow:column wrap; } div span{ width: 4rem; height: 2.6667rem; background: red; }</style><body> <!-- flex-direction --> <!-- <div> <span>1</span> <span>2</span> <span>3</span> </div> --> <!-- justify-content --> <!-- <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> --> <!-- flex-wrap--> <!-- <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> --> <!--align-items--> <!-- <div> <span>1</span> <span>2</span> <span>3</span> </div> --> <!--align-content--> <!-- <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> --> <!--flex-flow--> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></body></html><!-- 设置主轴方向设置子元素是跟着主轴来排序的方式默认的主轴是X 轴 Y轴是侧轴flex-direction:{ row 默认值 从左到右 row-reverse 翻转 从右到左 主轴是Y 轴 X轴是侧轴 column 设置主轴方向 从上到下 column-reverse 翻转 从下到上}设置主轴上的子元素 排序默认从头开始排序justify-content:{ flex-start 默认值 从头开始排序 如果主轴是X轴，则是从左到右 flex-end 从尾开始排序 center 居中 space-around 平均分配 space-between 两边贴边 剩余分配给中间}设置主轴上的子元素换行默认不换行flex-wrap:{ nowrap 默认不换行 wrap 换行}设置侧轴上的子元素水平垂直居中配和 justify-content:center使用于单行align-items:{ center 居中 stretch 拉伸高度 注意：子元素不能设置高度不然不生效} 设置侧轴上的子元素排序多行 注意 要和flex-wrap:wrap使用于多行align-content:{ flex-start; 默认在侧轴从头开始排序 flex-end; 在侧轴的从尾开始开始排序 center; 居中 space-around; 子项在侧轴平均分配剩下空间 space-between; 子项在侧轴先分布在两头，再平分剩余空间 stretch; 设置子项高度平分父元素的高度 注意：子元素不能设置高度不然不生效} 该属性是 flex-direction 和 flex-wrap 简写flex-flow:{ flex-flow:column wrap; == flex-direction: column; flex-wrap: wrap;} -->
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现