<!DOCTYPE html>

<html>

<head>

    <title>flex</title>

</head>

<style type="text/css">

.col {

    border: 1px solid #ccc;

    display: flex;

    justify-content: center;

    min-height: 300px;

    width: 310px;

}

.c2 {

    margin: 1px;

    border: 1px solid #BBB;

    text-align: center;

    background-color: #ccc;

    display: flex;

    justify-content: center;

    align-items: center;

}

.c2:hover {

    background-color: #ddd;

}

.left{

	display: flex;

	/*flex-direction: row;*/

	flex-wrap: wrap;

	/*justify-content: flex-start;*/

}

.left div{

	flex-basis: 60px;

    min-height: 60px;

    flex-grow: 1;

}

.right{

	display: flex;

	flex-direction: column;

}

.right div{

	flex-basis: 60px;

	min-width: 60px;

}

.hcol{

	display: flex;

	justify-content: center;

	align-items: center;

}

</style>

<body>

    <div class="col">

        <div class="left">

            <div class="c2">

            	<p>Num Lock</p>

            </div>

            <div class="c2">

                <p>/</p>

            </div>

            <div class="c2">

                <p>*</p>

            </div>

            <div class="c2">

                <p>7</p>

            </div>

            <div class="c2">

                <p>8</p>

            </div>

            <div class="c2">

                <p>9</p>

            </div>

            <div class="c2">

                <p>4</p>

            </div>

            <div class="c2">

                <p>5</p>

            </div>

            <div class="c2">

                <p>6</p>

            </div>

            <div class="c2">

                <p>1</p>

            </div>

            <div class="c2">

                <p>2</p>

            </div>

            <div class="c2">

                <p>3</p>

            </div>

            <div class="c2" style="flex-grow: 6;">

                <p>0</p>

            </div>

            <div class="c2" style="flex-grow: 1">

                <p>.</p>

            </div>

        </div>

        <div class="right">

            <div class="c2">

                <p>-</p>

            </div>

            <div class="c2 hcol" style="flex:2;">

                <p>+</p>

            </div>

            <div class="c2 hcol" style="flex:2;">

                <p>Enter</p>

            </div>

        </div>

    </div>

</body>

</html>

0和.使用下面的样式也可以

预想的是上面是等宽3列, 下面一个2:1的两列, 但是因为space around的缘故, 上面多一个间隙, 因为是3列, 所以要想完美的2:1两分, 前面的列需要稍微多一点点才可以

            <div class="c2" style="flex: 68;min-width: 60px;">

                <p>0</p>

            </div>

            <div class="c2" style="flex: 33;min-width: 60px;">

                <p>.</p>

            </div>

flex学习, 尝试布局一个计算器的更多相关文章

  1. Qt学习笔记-制作一个计算器-对话框Message Box

    在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已 ...

  2. Hyberledger-Fabric 1.00 RPC学习(2)尝试建立一个network

    本文参考:http://hyperledger-fabric.readthedocs.io/en/latest/build_network.html 这里我们学习建立第一个Hyperledger Fa ...

  3. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  4. 用Qt实现一个计算器

    一· 介绍 目的: 做一个标准型的计算器.用于学习Qt基础学习. 平台: Qt 5.12.0 二· 结构框架设计 2.1最终产品样式 界面的设计大体按照win系统自带的计算器做模仿.左边是win7 的 ...

  5. 用VBA写一个计算器

    着急的 玩家 可以 跳过“============”部分 ======================================可以跳过的 部分   开始==================== ...

  6. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  7. Apache错误:[error] (OS 10038)在一个非套接字上尝试了一个操作

    Apache错误:[error] (OS 10038)在一个非套接字上尝试了一个操作          博客分类: vb2005xu软件学习 OSApache防火墙PHPWindows  日志如下:[ ...

  8. android基础学习之布局

    我学习android第一步接触的就是布局的学习.布局是androidUI的基础,是重中之重.总的来说android有6种布局,分别是线性布局LinearLayout.相对布局RelativeLayou ...

  9. 程序员修仙之路- CXO让我做一个计算器！！

    菜菜呀,个税最近改革了,我得重新计算你的工资呀,我需要个计算器,你开发一个吧 CEO,CTO,CFO于一身的CXO X总,咱不会买一个吗? 菜菜 那不得花钱吗,一块钱也是钱呀··这个计算器支持加减乘除 ...

随机推荐

  1. python 全栈开发，Day33(tcp协议和udp协议,互联网协议与osi模型,socket概念,套接字(socket)初使用)

    先来回顾一下昨天的内容 网络编程开发架构 B/S C/S架构网卡 mac地址网段 ip地址 : 表示了一台电脑在网络中的位置 子网掩码 : ip和子网掩码按位与得到网段 网关ip : 内置在路由器中的 ...

  2. 如何批量的在django中对url进行用户登陆限制

    参考URL: https://blog.csdn.net/hanshengzhao/article/details/79540306?utm_source=blogxgwz0 1,首先定义一个内部有装 ...

  3. Zookeeper笔记（三）部署与启动Zookeeper

    下载zookeeper安装包 去Zookeeper官网,下载地址http://zookeeper.apache.org/releases.html,建议下载稳定版本,我下载的是zookeeper-3. ...

  4. java:矩阵面积

    实现一个矩阵类Rectangle,包含如下的一些成员变量与函数: 两个共有的成员变量 width 和 height 分别代表宽度和高度. 一个构造函数,接受2个参数 width 和 height 来设 ...

  5. Mysql数据库改名

    转自:https://www.cnblogs.com/leffss/p/7832100.html #!/bin/bash #作者:fafu_li #时间:2015.08.10 #mysql数据库改名, ...

  6. 【Java】 剑指offer(42) 连续子数组的最大和

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入一个整型数组,数组里有正数也有负数.数组中一个或连续的多个整/ ...

  7. python中的面相对象

    1.常用术语 2.创建类 empCount 变量是一个类变量,它的值将在这个类的所有实例之间共享.你可以在内部类或外部类使用 Employee.empCount 访问. 第一种方法__init__() ...

  8. 使用SQL语句从数据库一个表中随机获取数据

    -- 随机获取 10 条数据 SQL Server:SELECT TOP 10 * FROM T_USER ORDER BY NEWID() ORACLE:SELECT * FROM (SELECT ...

  9. Python3 卷积神经网络卷积层，池化层，全连接层前馈实现

    # -*- coding: utf-8 -*- """ Created on Sun Mar 4 09:21:41 2018 @author: markli " ...

  10. 实现分布式服务注册及简易的netty聊天

    现在很多地方都会用到zookeeper, 用到它的地方就是为了实现分布式.用到的场景就是服务注册,比如一个集群服务器,需要知道哪些服务器在线,哪些服务器不在线. ZK有一个功能,就是创建临时节点,当机 ...