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. javaScript 变量提升 var let const，以及JS 的解析阶段和执行阶段

    我们先来看一道面试题,大家猜想一下,下面这段代码,打印出来的结果是什么 var name = 'World!'; (function () { if (typeof name === 'undefin ...

  2. PHP:第四章——PHP数组array_diff计算数组差集

    <pre> <?php header("Content-Type:text/html;charset=utf-8"); /*知识点一:array_diff — 计 ...

  3. PHP:第一章——按位运算和求余运算（判断奇偶数）

    <?php //按位运算:与1按位运算等于0,输出偶数.如果等于1,输出奇数 //输出偶数: for($i=0;$i<10;$i++){ if(($i & 1)==0){ echo ...

  4. UVALive 6322 最大匹配...

    /* *e...大概明白了.首先用最大匹配看看是不是存在符合题意的匹配.然后呢.对枚举找到每个位置符合的字母里最小的那个. *判断是否能构成最大匹配.直到找完最后一个位置输出就好了.. *还是有些不理 ...

  5. Shiro 学习资料

    参考链接:http://jinnianshilongnian.iteye.com/blog/2018398

  6. LINK : fatal error LNK1123

    转: LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 这个是由于日志文件引起的,可以将 项目\属性\配置属性\清单工具\输入和输出\嵌入清单:原来 ...

  7. prop和state的区别

    1.prop用于定义外部接口,state用于记录内部状态: 2.prop的赋值在外部世界使用组件时,state的赋值在组件内部: 3.组件不应该改变prop的值,但是state的存在目的就是让组件来改 ...

  8. OO面向对象 课程总结

    测试与正确性论证的效果差差异 测试和正确性论证都是对程序进行可靠性的验证. 测试: IEEE提出了对软件测试的定义:使用人工或者自动的手段来运行或测定某个系统的过程,其目的在于检验它是否满足规定的需求 ...

  9. SSH项目搭建（四）——Maven的pom.xml配置

    史上最全的maven的pom.xml文件详解: https://www.cnblogs.com/qq765065332/p/9238135.html 下面的节点有不理解是啥意思的可以到上面链接的文章里 ...

  10. BZOJ3473: 字符串【后缀数组+思维】

    Description 给定n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串? Input 第一行两个整数n,k. 接下来n行每行一个字符串. Output 一 ...