flex布局计算器

<!doctype html>

<html>

<head>

<style>

.box{

  display: flex;

  flex-direction: column;

  height: 95vh;

  background-color: #f1f3f3;

}

.box-content{

  width:100%;

    flex: 1;

}

.btns-rows{

  width: 100%;

  flex: 1;

  display: flex;

  flex-direction: row;

  background-color: #f7f8f9;

}

.btn{

  text-align: center;

  box-sizing: border-box;

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  border-top: 1px solid #c3c6c7;

}

.btn:not(:last-child){

  border-right: 1px solid #c3c6c7;

}

.box-btns{

  width: 100%;

    flex: 1;

  display: flex;

  flex-direction: column;

}

.btns-rows-left1{

  flex: 3;display: flex;flex-direction: column;

}

.btns-rows-left2{

    display: flex; flex-direction: row;flex-grow: 1;

}

#btns2{

  flex: 2;display: flex;flex-direction: row;

}

#btns2-right{

  border-left: 1px solid #c3c6c7;

}

.btn:active{

  background-color: #888;

}

</style>

</head>

<body>

<div class="box">

  <div class="box-content">

  </div>

  <div class="box-btns">

    <div class="btns-rows">

      <div class="btn">AC</div>

      <div class="btn">DEL</div>

      <div class="btn">/</div>

      <div class="btn">*</div>

    </div>

    <div class="btns-rows">

      <div class="btn">7</div>

      <div class="btn">8</div>

      <div class="btn">9</div>

      <div class="btn">-</div>

    </div>

    <div class="btns-rows">

      <div class="btn">4</div>

      <div class="btn">5</div>

      <div class="btn">6</div>

      <div class="btn">+</div>

    </div>

    <div id="btns2" class="btns-rows">

      <div class="btns-rows-left1">

        <div class="btns-rows-left2">

          <div class="btn">1</div>

          <div class="btn">2</div>

          <div class="btn">3</div>

        </div>

        <div class="btns-rows-left2">

          <div class="btn">%</div>

          <div class="btn">0</div>

          <div class="btn">.</div>

        </div>

      </div>

              <div id="btns2-right" class="btn">=</div>

    </div>

  </div>

</div>

</body>

</html>

　　

flex 布局 计算器的更多相关文章

  1. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. MVC 学习(一）Linq to Entities 简单Demo

    Linq定义了一组标准查询符号,标准查询符允许查询作用于所有基于IEnumerable<T>接口源. 我们看看LINQ的总体架构.如下图所示 EF4.1 数据操作及持久化,常见的是Data ...

  2. 简述 OAuth 2.0 的运作流程（转）

    原文地址:http://www.barretlee.com/blog/2016/01/10/oauth2-introduce/ 本文将以用户使用 github 登录网站留言为例,简述 OAuth 2. ...

  3. Linux_(1)基本命令(上)

    一.基本命令1.我是谁 whoami --who am i2.谁在线 who w3.显示当前路径(定位) pwd4.切换目录 cd ~返回主目录 cd ..返回上一级目录5.查看某个目录中的子目录和文 ...

  4. mysql mysqld.sock文件丢失问题

    修改mysql 编码为utf8时 在/etc/mysql/目录下 在 [client] 添加 default-character-set=utf8 [mysqld]添加 default-charact ...

  5. 简单DP入门四连发

    复习一下一直不太懂的dp. dp博大精深,路还长着呢 第一题;http://acm.hdu.edu.cn/showproblem.php?pid=2084 从下往上就是水题 #include<c ...

  6. Android.Tools.Eclipse hangs at the Android SDK Content Loader

    Eclipse hangs at the Android SDK Content Loader http://stackoverflow.com/questions/13489141/eclipse- ...

  7. 爬取掌阅app免费电子书数据

    主要介绍如何抓取app数据及抓包工具的使用,能看到这相信你已经有爬虫基础了 编不下去了,主要是我懒,直接开干吧! 一.使用环境和工具 windows + python3 + Jsonpath + Ch ...

  8. Luogu 3620 数据备份 - Set

    Solution 很显然, 最优情况肯定是相邻两个相连 . 然后模型就跟 Luogu1484 类似了. 把两个房子 看成一个坑 (参考 Luogu1484), 选取 $k$ 个不相邻的坑, 使得权值最 ...

  9. Sevlet处理HTML表单

    表单<form>用于搜集不同类型的用户输入.可以轻松地将一个HTML表单从一个Servlet发送到浏览器,当用户提交表单时,在表单元素中输入的值就会被当做请求参数发送到服务器. reque ...

  10. 纯H5+c3实现表单验证

    客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧. ...