JS Web Flex弹性盒子模型代码实例


Posted in Javascript onMarch 10, 2020

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>

效果图

JS Web Flex弹性盒子模型代码实例

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弹性盒子模型代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 #Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
我用php+mysql写的留言本
2006/10/09 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
对python的输出和输出格式详解
2018/12/08 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python两种注释用法的示例
2020/10/09 Python
Pandas之缺失数据的实现
2021/01/06 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js