编程 Javascript

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

Posted in Javascript onMarch 10, 2020

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弹性盒子模型代码实例

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

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

- Author -

work hard work smart

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js取得html iframe中的元素和变量值

Jun 30 Javascript

详解AngularJS控制器的使用

Mar 09 Javascript

js自定义select下拉框美化特效

May 12 Javascript

jQuery的三种bind/One/Live/On事件绑定使用方法

Feb 23 Javascript

ES6新特性五：Set与Map的数据结构实例分析

Apr 21 Javascript

WdatePicker.js时间日期插件的使用方法

Jul 26 Javascript

ng-zorro-antd 入门初体验

Dec 03 Javascript

开源一个微信小程序仪表盘组件过程解析

Jul 30 Javascript

vue transition 在子组件中失效的解决

Nov 12 Javascript

微信小程序开发（二）：页面跳转并传参操作示例

Jun 01 Javascript

浅谈vue中resetFields()使用注意事项

Aug 12 Javascript

梳理一下vue中的生命周期

Dec 30 Vue.js

JS实现网页烟花动画效果

Mar 10 #Javascript

keep-alive不能缓存多层级路由菜单问题解决

Mar 10 #Javascript

JS关闭子窗口并且刷新上一个窗口的实现示例

Mar 10 #Javascript

Vue动态加载图片在跨域时无法显示的问题及解决方法

Mar 10 #Javascript

Vue项目打包压缩的实现(让页面更快响应)

Mar 10 #Javascript

vue实现瀑布流组件滑动加载更多

Mar 10 #Javascript

JavaScript代理模式原理与用法实例详解

Mar 10 #Javascript