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 相关文章推荐
javascript 事件绑定问题
Jan 01 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue实现下拉菜单树
Oct 22 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
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
javascript实现yield的方法
2013/11/06 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Python及PyCharm下载与安装教程
2017/11/18 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python实现微信自动回复功能
2018/04/11 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python字符串查找函数的用法详解
2019/07/08 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
2014国庆节标语口号
2014/09/19 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python