flex学习, 尝试布局一个计算器

<!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学习, 尝试布局一个计算器的更多相关文章

Qt学习笔记-制作一个计算器-对话框Message Box
在做计算器的前提先做一个加法器. 设计界面. 在点击计算的时候,获取前两个输入框中的数据相加后显示在第三个输入框. toInt是将字符串转换为数字.number静态函数是将数字转化为字符串. 加法器已 ...
Hyberledger-Fabric 1.00 RPC学习(2)尝试建立一个network
本文参考:http://hyperledger-fabric.readthedocs.io/en/latest/build_network.html 这里我们学习建立第一个Hyperledger Fa ...
flex学习小结
接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...
用Qt实现一个计算器
一· 介绍目的: 做一个标准型的计算器.用于学习Qt基础学习. 平台: Qt 5.12.0 二· 结构框架设计 2.1最终产品样式界面的设计大体按照win系统自带的计算器做模仿.左边是win7 的 ...
用VBA写一个计算器
着急的玩家可以跳过“============”部分 ======================================可以跳过的部分开始==================== ...
Flex box弹性布局及响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
Apache错误:[error] (OS 10038)在一个非套接字上尝试了一个操作
Apache错误:[error] (OS 10038)在一个非套接字上尝试了一个操作博客分类: vb2005xu软件学习 OSApache防火墙PHPWindows 日志如下:[ ...
android基础学习之布局
我学习android第一步接触的就是布局的学习.布局是androidUI的基础,是重中之重.总的来说android有6种布局,分别是线性布局LinearLayout.相对布局RelativeLayou ...
程序员修仙之路- CXO让我做一个计算器！！
菜菜呀,个税最近改革了,我得重新计算你的工资呀,我需要个计算器,你开发一个吧 CEO,CTO,CFO于一身的CXO X总,咱不会买一个吗? 菜菜那不得花钱吗,一块钱也是钱呀··这个计算器支持加减乘除 ...

随机推荐

Python的字符串内建函数（字符串处理）
Python的字符串内建函数这些方法实现了string模块的大部分方法 , 如下表硕士列出了目前字符串内建支持的方法 string = 'XXX' string.capitalize() # 把字符串 ...
JQuery中的Ajax（六）
一:Ajax请求jQuery.ajax(options) load(url,[data],[callback])jQuery.get(url,[data],[callback]) jQuery.get ...
IntentService用法
IntentService 用完即走 IntentService,可以看做是Service和HandlerThread的结合体,在完成了使命之后会自动停止,适合需要在工作线程处理UI无关任务的 ...
jQuery如何退出each循环和如何退出function函数
1.在函数内部使用return false是跳出function; 2.在each的回调函数中使用return false,是跳出each循环;return true 进入下一个循环: 3.break ...
BZOJ1103 [POI2007]大都市meg dfs序线段树
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解题目传送门 - BZOJ1103 题意概括一棵树上,一开始所有的边权值为1,我们要支持两种操作: 1. 修改某一条边的权值为 ...
【Java】剑指offer(52) 两个链表的第一个公共结点
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集题目输入两个链表,找出它们的第一个公共结点. 思路蛮力法:遍历第一个 ...
043 HIVE中的HQL操作
1.字段查询 select empno,ename from emp; 2.过滤where,limit,distinct select * from emp where sal >2500; s ...
presistence
每一个神都是从弱到强的,像继科,在2011年之前,人很浮躁,球不稳,只是偶尔打出高质量而已:在输了无数场球之后,球厚了,人也定了(刘国梁评价),才抓住的机会成就了最快大满贯,并且创造了之后的辉煌,继科 ...
【猿分享第10期】微信小程序Meetup扫盲专场回顾（转载）
首先感谢答疑师:子慕前端工程师,目前就职于医联,偶尔写点博客,吐槽总结,偶尔吟“湿”作对,润滑万物,江湖人称子慕大诗人. 直播间语音回放收听,请微信扫描下图二维码授权进入即可. 以下为本次直播的全部 ...
Solution for unable to create "dead-letter-exchange" in RabbitMQ
在参考 Dead-Letter-Exchange 进行Dead-letter-exchange的理解, 在本地时,想要创建 Dead-letter-exchange 时,一直报错,错误如下: Unha ...

flex学习, 尝试布局一个计算器

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

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

随机推荐

热门专题