JS Web的Flex弹性盒子模型
本文共 1501 字，大约阅读时间需要 5 分钟。
1. justify-content
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <! 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 三行二列
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <! 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 > |
效果图
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7352767.html，如需转载请自行联系原作者
你可能感兴趣的文章
CBO中 SMON 进程与 col_usage$ 的维护
查看>>
linux 启动oracle
查看>>
LOGGING 、FORCE LOGGING 、NOLOGGING、归档模
查看>>
《写给大忙人看的java se 8》笔记
查看>>
我的友情链接
查看>>
Linux学习：Linux基础命令集（1）
查看>>
倒计时：计算时间差
查看>>
Linux/windows P2V VMWare ESXi
查看>>
IEC61850时间质量TimeQuality各个比特位的含义
查看>>
Windows XP倒计时到底意味着什么？
查看>>
tomcat一步步实现反向代理、负载均衡、内存复制
查看>>
CentOS忘记root用户密码，进入单用户模式修改密码
查看>>
运维工程师在干什么学些什么？【致菜鸟】
查看>>
将私有Android工程迁移至GitHub
查看>>
Linux中iptables详解
查看>>
java中回调函数以及关于包装类的Demo
查看>>
***常用兵器之扫描篇（下）
查看>>
maven异常:missing artifact jdk.tools:jar:1.6
查看>>
终端安全求生指南（五）-——日志管理
查看>>
我的友情链接
查看>>