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*/ /* section{ display:flex; width: 21.3333rem; height: 8rem; background: pink; margin: 0 auto; } section div:nth-child(1){ width: 2.6667rem; height: 8rem; background: red; } section div:nth-child(2){ flex: 1; background: green; } section div:nth-child(3){ width: 2.6667rem; height: 8rem; background: blue; } */ /* align-self*/ /* section{ display:flex; width: 21.3333rem; height: 8rem; background: pink; } section div{ width: 2.6667rem; height: 2.6667rem; background: red; margin-right: .1333rem; } section div:nth-child(3){ align-self:flex-end; } */ /* order*/ section{ display:flex; width: 21.3333rem; height: 8rem; background: pink; } section div{ width: 2.6667rem; height: 2.6667rem; background: red; margin-right: .1333rem; } section div:nth-child(3){ order: -1; } </style><body> <!--flex-flow--> <!-- <section> <div>1</div> <div>2</div> <div>3</div> </section> --> <!--align-self--> <!-- <section> <div>1</div> <div>2</div> <div>3</div> </section> --> <!--order--> <section> <div>1</div> <div>2</div> <div>3</div> </section> </body></html><!-- 设置子项分配剩余空间 用flex 来表示占多少份数注意： 数字越大分配越多flex:{ <number> 默认是 0 }设置子项 单个项目与其他项目不一样的对齐方式可以覆盖 aling-items 属性默认值为 auto 表示继承父元素align-items属性如果没有父元素，则等同于stretchalign-self:{ flex-end; } 设置子项位置注意：数字越小越靠前order:{ -1 默认值 0} -->
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现