css flex布局
关于flex布局的一些简单用法
效果(下图)
实现代码:
<!--html--> <div class="wrap"> <div class="content">这是子盒子</div> </div> //css .wrap { display: flex; width: 300px; height: 300px; background-color: #ccc; justify-content: center;//子盒子位于现在的位置 //justify-content: flex-start;子盒子位于现在的位置 的左边 //justify-content: flex-end;子盒子位于现在的位置 的右边 } .content { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: orange; }
效果(如下图)
<!--html--> <div class="wrap"> <div class="content">这是子盒子</div> </div> //css .wrap { display: flex; width: 300px; height: 300px; background-color: #ccc; } .content { width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: orange; align-self: center;//位于上图中现在的位置 //align-self: flex-start;位于上图中现在的位置 的上方 //align-self: flex-end;位于上图中现在的位置 的下方 }
//用于父元素 justify-content: center | flex-start | flex-end;// 中 左 右 三个位置 //用于子元素 align-self: center | flex-start | flex-end;// 中 上 下 三个位置 //两个属性相互结合,就可以做到很多布局
转化成flex的元素的子元素默认是排在一行的
flex-wrap:wrap(换行-在下方)| nowrap(换行-在上方)| none (默认-不换行)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*css*/ .wrap{ width:600px; height:300px; display:flex; background-color: #ccc; } .wrap div{ width:25%; height: 150px; box-sizing: border-box; line-height: 150px; text-align: center; border: 1px solid blue; } </style> </head> <body> <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
上面代码的效果图(默认不换行):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*css*/ .wrap{ width:600px; height:300px; display:flex; background-color: #ccc; flex-wrap: wrap; } .wrap div{ width:25%; height: 150px; box-sizing: border-box; line-height: 150px; text-align: center; border: 1px solid blue; } </style> </head> <body> <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
上面代码的效果图(换行-在下方)
以后有在了解的再补上
本文来自博客园,作者:_zhiqiu,转载请注明原文链接:https://www.cnblogs.com/guojikun/p/6179283.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库