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. Animation鱼眼效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  2. python的日志模块logging和syslog

    syslog模块是在unix环境下工作的模块,不能用于windows,在windows环境下可以使用logging模块. 一.syslog syslog模块可以用于记录系统运行的信息,这个模块提供的方 ...

  3. SSO-CAS单点登录

    基本概念 单点登录SSO ,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. CAS(Centeral Authenti ...

  4. cas AssertionThreadLocalFilter

    AssertionThreadLocalFilter AssertionThreadLocalFilter作用很简单,就是将Assertion绑定到ThreadLocal. ThreadLocal 无 ...

  5. noip2005循环

    题解: 迭代,一次次k累加计算 代码: #include<bits/stdc++.h> using namespace std; ; ][N],ans[N]; char s[N]; boo ...

  6. Android系统移植与驱动开发

    21世纪,Android发展非常迅速,在市场上占有很大的比例,遥遥领先与iOS,很大程度上是因为任何人都可以利用Android的源代码定制完全属于自己的嵌入式开发系统,而不需要向Google交一分钱. ...

  7. spring学习笔记Core Technologies

    Spring 框架最重要的是Ioc(Inversion of Control)容器,在这个基础之上衍生出了AOP(Aspect-Oriented Programming)技术,80/20法则,这货可以 ...

  8. ESET Smart Security 免费60天

    领取地址:http://goo.gl/aEl2Xy 兑换地址:http://goo.gl/h1n62K

  9. 福大软工1816 · 第八次作业（课堂实战）- 项目UML设计（团队）

    团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...

  10. spring事务管理及相关知识

    最近在项目中遇到了spring事务的注解及相关知识,突然间感觉自己对于这部分知识只停留在表面的理解层次上,于是乎花些时间上网搜索了一些文章,以及对于源码的解读,整理如下: 一.既然谈到事务,那就先搞清 ...