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. Java-Runtime 类

    https://www.cnblogs.com/slyfox/p/7272048.html Java-Runtime 类 Runtime 类代表着Java程序的运行时环境,每个Java程序都有一个Ru ...

  2. notepad++设置右键

    Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\Shell\NotePad++][HKEY_CLASSES_ROOT\*\Shell\ ...

  3. kernel jenkins build script

    #!/bin/bash #gcc: site="https://releases.linaro.org" #https://releases.linaro.org/componen ...

  4. Integer封装类的相关知识

    java中,在一些情况下会有自动装箱与自动拆箱. 自动拆箱/装箱是在编译期,依据代码的语法,决定是否进行拆箱和装箱动作.装箱过程:把基本类型用它们对应的包装类型进行包装,使基本类型具有对象特征.拆箱过 ...

  5. 解决WinForm(C#)中MDI子窗体最大化跑偏的问题

    “用MDI方式打开一个子窗口体后,总是不能最大化显示,明明子窗口体的WindowState设置为Maximized?”,相信有很多人会遇到这的样问题,请按下面的方法设置即可使MDI子窗体最大化: 1. ...

  6. 百视通与微软共同宣布9月在华发布Xbox One

    4月30日消息,百视通今日与微软共同宣布,于今年9月在华发布Xbox One.这是继百视通与微软2013年9月成立合资公司后,双方合作的又一进展. 微软副总裁,硬件及设计工作室部门主管尤瑟夫 •梅赫迪 ...

  7. iframe 问题集合

    1. 历史记录问题 Firefox: 如果iframe是静态存在在HTML中时,iframe的任何src或者location改变都会被记录到浏览器history中. 如果iframe是在页面加载完成后 ...

  8. 利用Teensy进行em410x卡模拟以及暴力破解em410x类门禁系统

    什么是低频?什么是EM410x? 首先,我不得不再次提一下那些工作在125khz频率下的低频卡(如:EM410X之类的),以便大家更好的阅读以下的内容. 什么是低频?以下就是低频的解释: 低频(LF, ...

  9. Ubuntu 16.04 安装 PyCharm

    https://blog.csdn.net/zhuanshu666/article/details/73554885

  10. ZOJ 2965 Accurately Say "CocaCola"!

    Time Limit: 2 Seconds      Memory Limit: 65536 KB In a party held by CocaCola company, several stude ...