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

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>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • NodeJS http模块用法示例【创建web服务器/客户端】

    本文实例讲述了NodeJS http模块用法.分享给大家供大家参考,具体如下: Node.js提供了http模块,用于搭建HTTP服务端和客户端. 创建Web服务器 /** * node-http 服务端 */ let http = require('http'); let url = require('url'); let fs = require('fs'); // 创建服务器 let server = http.createServer((req, res) => { // 解析请求 le

  • php实现JWT(json web token)鉴权实例详解

    JWT是什么 JWT是json web token缩写.它将用户信息加密到token里,服务器不保存任何用户信息.服务器通过使用保存的密钥验证token的正确性,只要正确即通过验证.基于token的身份验证可以替代传统的cookie+session身份验证方法. JWT由三个部分组成:header.payload.signature 以下示例以JWT官网为例 header部分: { "alg": "HS256", "typ": "JWT

  • 使用webpack搭建pixi.js开发环境

    本文介绍怎么使用webpack搭建pixi.js游戏的开发环境,怎么配置babel将ES6+代码最终转换为ES5,怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目. 前提 需要会简单使用nodejs,了解package.json,会简单使用npm init,npm install,npm run命令. 需要稍微了解webpack和gulp. 需要有google chrome浏览器. 最好会一点git,demo项目pixi-webpack-demo托管在github上,通过

  • node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例

    本文实例讲述了node.js 使用 net 模块模拟 websocket 握手进行数据传递操作.分享给大家供大家参考,具体如下: websocket 是一种让浏览器与服务器之间建立持久的连接,并能进行双向数据传输的一种协议. websocket 属性应用层协议,基于tcp传输协议,并复用http的握手通道. 一.如何进行websocket连接. websocket复用了http的握手通道,客户端通过http请求与服务端进行协商,升级协议.协议升级完后,后面的数据交换则遵照websocket协议.

  • Nodejs + Websocket 指定发送及群聊的实现

     目的 通过nodejs + ws (Websocket) 实现点对点发送及群聊发送 项目搭建直接跳过,这里列举一下用到的插件 yarn add ws WebSocket 话不多说,直接上码 对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用, webSocket 点对点也好,群聊也好,主要是用到一个方法 clients 它的作用就是存储了连接, 我们可以通过对每一个连接增加标识,然后根据接收到的信息进行解

  • nodejs开发一个最简单的web服务器实例讲解

    开发一个最简单的http服务 require 引入http模块 创建http服务 侦听端口 实战案例 vim server.js // 使用JavaScript最严格的语法,防止出现一些问题 'use strict' // 引入http模块 var http = require("http"); // 创建一个服务 var app = http.createServer(function(req, res){ // 设置http头 res.writeHead(200, {"C

  • 使用Webpack提升Vue.js应用程序的4种方法（翻译）

    本文翻译自,翻译技巧不太好,不喜勿碰 : 4 Ways To Boost Your Vue.js App With Webpack 众所周知,webpack 是 开发 vue.js 单页面应用程序的必备工具,通过管理复杂的构建步骤,它可以使您的开发工作流程更加简单,并且可以优化应用程序的大小和性能. 在本文中,我将解释Webpack增强Vue应用程序的四种方法,包括: Single file components 单文件组件 Optimising the Vue build Browser ca

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

    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

  • 基于js实现抽红包并分配代码实例

    这篇文章主要介绍了基于js实现抽红包并分配代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 将 50000元随机分给10个人,其中3个人必须分到百位数,4个人分到千位数,3个人分到万位数,每个人所得金额 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name=&

  • JS通用方法触发点击事件代码实例

    这篇文章主要介绍了JS通用方法触发点击事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最简单的触发单击事件肯定是elem.click(),平时在不需要考虑兼容性的场合我都是这么干的,但是毕竟这个方法有兼容性(具体兼容性如何没做过测试),所以还是要掌握一个通用的方法. 以下代码是网上比较容易找到的一段代码,我在前面加了一段MouseEvent的判断: /** * 触发单击事件 * @param elem 需要触发事件的DOM对象 */

  • 基于java web获取网页访问次数代码实例

    基于java web获取网页访问次数代码实例

    这篇文章主要介绍了基于java web获取网页访问次数代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 ServletContext context = request.getServletContext(); /** * 从ServletContext中获取计数器对象 */ Integer count = (Integer) context.getAttribute("counter"); /** * 如果为空,则在Servl

  • JS隐藏号码中间4位代码实例

    本文实例为大家分享了JS隐藏号码中间4位的具体代码,供大家参考,具体内容如下 function resetPhone(phone) { var str = String(phone) var len = str.length; var prev,next; if (len >= 7) { prev = str.slice(-len,-7) next = str.slice(-3) str = prev+"****"+next } else if (len < 7 &

  • JS计算斐波拉切代码实例

    JS计算斐波拉切代码实例

    这篇文章主要介绍了js计算斐波拉切,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 function feibo(a){ if(!a || a <= 0){ throw new Error("参数错误,必须大于0"); }else if(a == 1){ return 1; }else if(a == 2){ return 2; }else{ return feibo(a-1) + feibo(a-2); } } console.

  • js实现各浏览器全屏代码实例

    现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: //直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="fullScreen()">现代浏览器全屏

  • Java Web 登录页面的实现代码实例

    Java Web 登录页面的实现代码实例

    代码如下~ 内有详细解释,最后有照片! <html> <script type="text/javascript"> function inUser(){ username_mess.style.visibility="visible"; } function outUser(){ //获取name 为 usesrname 的文本 u=f1.username.value; f1.username.style.border="1px

  • 基于js实现逐步显示文字输出代码实例

    今天清理chrome书签,突然就点到了一个关于 知乎五周年的网页,这帮程序员的脑子真有趣,就算是保存一年后再看也还是觉得好有趣,下边是一个截图图片描述 这个网页展示了一个类似ide接口的小窗口,文字逐步输入,并且还伴随一些有点炫的css动画,为个人生成专属数据.当然这个展示还包括了其他一些数据的传输啦,特殊效果(类似触发一个标签的js回调啦),css那个一堆波浪的动画啦等等一些有意思的,这些暂时不管,我们今天就来看看这个逐步显示的文字是怎么做到的,我首先想到的就是做一个简单的demo 由于没有读

  • JS实现前端动态分页码代码实例

    思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ... 首先,先是前端的布局样式 <body> /*首先,在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在

随机推荐