铁雪资源网 Design By www.gsvan.com
1.justify-content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Flexbox弹性盒布局</title> <style> .demo{ display: -webkit-flex; justify-content: space-between; } </style> </head> <style> </style> <body> <div class="demo"> <div>姓名: 张三</div><div>年龄: 26岁</div> </div> <div class="demo"> <div>性别: 男</div><div>生日: 1995-05-06</div> </div> <div class="demo"> <div>检查编号: 25</div><div>住院号: 198</div> </div> </body> </html>
效果图
2.flex三行二列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Flexbox弹性盒布局</title> <style> .demo{ display: -webkit-flex; } .item-flex{ flex:1; } </style> </head> <style> </style> <body> <div class="demo"> <label class="item-flex">姓名: 张三</label><label class="item-flex">年龄: 26岁</label> </div> <div class="demo"> <label class="item-flex">性别: 男</label><label class="item-flex">生日: 1995-05-06</label> </div> <div class="demo"> <label class="item-flex">检查编号: 25</label><label class="item-flex">住院号: 198</label> </div> </body> </html>
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
JS,Web,Flex,弹性盒子
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无JS Web Flex弹性盒子模型代码实例的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。