AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JS Web的Flex弹性盒子模型

2017-11-23 1016
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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，如需转载请自行联系原作者

文章标签：
JavaScript
关键词：
JavaScript Web
web js
js web
web flex
web盒子模型
zting科技
目录
相关文章
我们是幸福一家人
|
4月前
|
前端开发 JavaScript 开发者
JavaScript：无处不在的Web语言
JavaScript：无处不在的Web语言
我们是幸福一家人
292 98
我们是幸福一家人
|
4月前
|
前端开发 JavaScript 开发者
JavaScript：构建动态Web的核心力量
JavaScript：构建动态Web的核心力量
我们是幸福一家人
274 99
我们是幸福一家人
|
4月前
|
JavaScript 前端开发 开发者
JavaScript：驱动现代Web的核心引擎
JavaScript：驱动现代Web的核心引擎
我们是幸福一家人
175 47
游客z4tr7ctjfoahk
|
8月前
|
前端开发 算法 API
构建高性能图像处理Web应用：Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践，涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持，TailwindCSS加速UI开发，WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略，解决大图像处理性能瓶颈，并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能，进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
游客z4tr7ctjfoahk
390 9
我们是幸福一家人
|
4月前
|
JavaScript 前端开发 物联网
JavaScript：驱动现代Web的核心引擎
JavaScript：驱动现代Web的核心引擎
我们是幸福一家人
95 2
timeRATE
|
7月前
|
JSON JavaScript 前端开发
JavaScript入门干货：蓝桥杯Web组分章学习笔记（基于蓝桥云课《JavaScript基础入门》）
这是一份详尽的JavaScript学习笔记，涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作，DOM/BOM事件处理，内置对象（如Array、Date、Math）用法，JSON格式解析，以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制，并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理，注释细致，适合初学者系统掌握JavaScript编程知识。
timeRATE
134 2
我是快乐的嘟嘟
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
我是快乐的嘟嘟
614 57
chnjames
|
XML JavaScript 前端开发
JavaScript控制台：提升Web开发技能的秘密武器
作为Web开发人员，掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法，从基本的log()到高级的profile()和memory，每种方法都配有示例和说明，帮助开发者更高效地调试和记录信息。通过了解这些工具，您可以优化代码、提高开发速度，减少错误，使编码过程更加顺畅愉快。
chnjames
200 1
JavaScript控制台：提升Web开发技能的秘密武器
东方睿赢
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合；TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展，特别是在Vue 3.0中完全采用TypeScript编写，预示着未来的Web开发将更加高效、可靠。
东方睿赢
622 4
东方睿赢
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义，TypeScript 能够在编码阶段发现潜在错误，提高代码质量；支持组件的清晰定义与复用，增强代码的可维护性；与 React、Vue 等框架结合，提供更佳的开发体验；适用于大型项目，优化代码结构和性能。随着 Web 技术的发展，TypeScript 的应用前景广阔，将继续引领 Web 开发的新趋势。
东方睿赢
348 2

热门文章

最新文章

  • 1
    Windows Defender 导致 Web IIS 服务异常停止排查
  • 2
    百宝箱开放平台 ✖️ Web SDK
  • 3
    Burp Suite Professional 2025.10 for Windows x64 - 领先的 Web 渗透测试软件
  • 4
    基于HTML+CSS+JS的高端3D相册【完整项目源码】
  • 5
    js之数字时钟
  • 6
    node.js入门 - 12.api：进程（process）
  • 7
    JS isNaN 方法使用说明
  • 8
    学习JavaScript 的必备 （一），让您对js的 function， javascript内置对象，this概念及之间的关系不再迷惑。（希望能置为推荐篇，为更多的js初学者关注）
  • 9
    浅谈 js eval作用域
  • 10
    JavaScript宝座：七大框架论剑
  • 1
    Python web Django快速入门手册全栈版，共2590字，短小精悍
    315
  • 2
    Go语言Web开发框架实践：路由、中间件、参数校验
    422
  • 3
    Go语言Web开发框架实践：使用 Gin 快速构建 Web 服务
    1021
  • 4
    魔搭notebook在web IDE下，使用jupyter notebook，python扩展包无法更新升级
    193
  • 5
    Web端实时通信技术SSE在携程机票业务中的实践应用
    214
  • 6
    🎉 Harmony OS Next里的Web组件：网页加载的全流程掌控手册
    394
  • 7
    菜鸟之路Day38一一Web开发综合案例（三）
    204
  • 8
    菜鸟之路Day37一一Web开发综合案例（员工管理）
    229
  • 9
    Web端实时通信技术SSE在携程机票业务中的实践应用
    299
  • 10
    菜鸟之路Day36一一Web开发综合案例（部门管理）
    283

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • JavaScript 自学手册文档教程
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来
    • 下一篇
    基于Python+Vue开发的口腔牙科预约管理系统