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>

　　

　　效果图

JS Web的Flex弹性盒子模型的更多相关文章

  1. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flex 弹性盒子模型一些案例.html

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 自适应导航 <ul class="navi ...

  3. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 弹性盒子模型display:flex

    1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 弹性盒子模型属性之flex-grow

    在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-g ...

  6. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  7. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  8. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  9. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

随机推荐

  1. 最新的ES 5.0路由算法底层实现

    http://www.cnblogs.com/bonelee/p/6078947.html 里分析了ES bulk实现,其中路由代码: ShardId shardId = clusterService ...

  2. 玩转控件：重绘DEVEXPRESS中DateEdit控件 —— 让DateEdit支持只选择年月 (提供源码下载)

      前言 上一篇博文<玩转控件:重绘ComboBox —— 让ComboBox多列显示>中,根据大家的回馈,ComboBox已经支持筛选了,更新见博文最后最后最后面.   奇葩 这两天遇到 ...

  3. Graph

    题目: [问题描述] 给你一个有向图,有 N 个点,标号为 0 到 N -1,图中的每条边有个权值,每次你经过一条边,它的权值将被记入你的得分,如果同样的边被经过多次,它的权值每次都将被记入总分,权值 ...

  4. mysql数据库索引相关

    一 介绍 什么是索引? 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要.索引优化应该是 ...

  5. PostgreSQL角色和权限理解

    1.继承的权限只是继承该组的表的权限,用户对应的管理员权限则不会被继承. 2.inherit权限是说本角色是否继承别人的权限,而不是本权限能否被别的角色继承.   postgres=# create ...

  6. UITableView简述

    原帖:http://blog.csdn.net/totogo2010/article/details/7642908 Table View简单描述: 在iPhone和其他iOS的很多程序中都会看到Ta ...

  7. AR.Drone 2.0四轴飞机体验：最好的玩具航拍器

    http://digi.tech.qq.com/a/20140513/007458.htm?pgv_ref=aio2012&ptlang=2052 AR.Drone 2.0四轴飞机体验:最好的 ...

  8. android中的两种上下文区别

    1.this    继承于content      子类 2.getAppliCationContext()     返回值为context    父类 父类有的子类都有,子类父类不一定有. 在对话框 ...

  9. Unity插件-ShareSDK使用指南

    Unity插件ShareSDK使用教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Summariz ...

  10. Shader的函数公式以及使用的场景

    Shader 是干什么的? 它的作用可以先简单理解为对屏幕上的物体,进行颜色处理. 而大家都知道,所有计算机,处理颜色的当然是显卡,也就是 GPU . 所以我们写 Shader 的目的就是告诉 GPU ...