编程 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 相关文章推荐

javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

Jan 23 Javascript

博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

Mar 24 Javascript

checkbox使用示例

Aug 23 Javascript

jQuery如何防止这种冒泡事件发生

Feb 27 Javascript

javascript事件委托的方式绑定详解

Jun 10 Javascript

javaScript中Math()函数注意事项

Jun 18 Javascript

JavaScript小技巧整理篇(非常全)

Jan 26 Javascript

Bootstrap按钮下拉菜单组件详解

May 10 Javascript

AngularJS学习笔记之表单验证功能实例详解

Jul 06 Javascript

Javascript网页抢红包外挂实现分享

Jan 11 Javascript

vue-cli3配置与跨域处理方法

Aug 17 Javascript

基于vue-cli3+typescript的tsx开发模板搭建过程分享

Feb 28 Javascript

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