程序员经验分享-hwhale

带弹性盒的计算器键盘布局

2023-11-25

我正在用 Flexbox 构建一个计算器。我想要其中一个键的高度是两倍，另一个键的宽度是两倍。

我用谷歌搜索了很多，但找不到这两个案例。

对于两倍高度的键，我发现的唯一答案是flex-direction as column。但在这种情况下，我将无法制作双宽度键。

Here is my code（在 codepen.io 上）。请帮忙。

$(function() {
  var curr = "",
    prev = "";
  var updateView = function() {
    $('#curr').html(curr);
    $('#prev').html(prev);
  };
  $('.keysNum').on('click', function(e) {
    curr += $(this).html();
    console.log(this);
    updateView();
  });
  $('.keysOp').on('click', function(e) {

  });
});
.flexBoxContainer {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  min-height: 100vh;
}

.calculator {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-height: 100vh;
}

@media (min-width: 321px) {
  .calculator {
    width: 320px;
  }
}

.calculator .keys {
  border: #d3d2cb 0.5px solid;
  background: #fefdff;
  color: #33393d;
  height: 50px;
  height: 14.2857142857vh;
  width: 25%;
  line-height: 14.2857142857vh;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  transition: background 0.2s linear;
}

.calculator .keysOp {
  background: #f1f1ef;
}

.calculator .keysC {
  color: #f94913;
}

.calculator .keys:hover {
  background: #d3d2cb;
  transition: background 0s linear;
}

.calculator .keys:focus {
  outline: none;
}

.calculator .keys:active {
  background: #93938E;
}

.calculator .screen {
  background: #e9e8e5;
  height: 14.2857142857vh;
  width: 100%;
  line-height: 14.2857142857vh;
  direction: rtl;
}

.calculator .screen:last-child {
  font-size: 4rem;
}

.calculator #anomaly-keys-wrapper {
  display: flex;
  width: 100%;
}

.calculator #anomaly-keys-wrapper>section:first-child {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
}

.calculator #anomaly-keys-wrapper>section:first-child>div.keys {
  flex: 1 0 33.33%;
}

.calculator #anomaly-keys-wrapper>section:first-child>div.long {
  flex-basis: 66.67%;
}

.calculator #anomaly-keys-wrapper>section:last-child {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.calculator #anomaly-keys-wrapper>section:last-child>.tall {
  background: #f94913;
  color: #fefdff;
  width: 100%;
  line-height: 28.5714285714vh;
  flex: 1;
}

.calculator #anomaly-keys-wrapper>section:last-child>.tall:hover {
  background: #c73a0f;
}

.calculator #anomaly-keys-wrapper>section:last-child>.tall:focus {
  outline: none;
}

.calculator #anomaly-keys-wrapper>section:last-child>.tall:active {
  background: #8b280a;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexBoxContainer">
  <div class="calculator">
    <div class="screen" id="prev"></div>
    <div class="screen" id="curr"></div>
    <!--     <div class="keys keysC keysOp" tabindex="2">C</div> -->
    <div class="keys keysC keysOp" tabindex="2">C</div>
    <div class="keys keysOp" tabindex="3"><i class="icon ion-backspace-outline"></i></div>
    <div class="keys keysOp" tabindex="4">&divide</div>
    <div class="keys keysOp" tabindex="5">&times</div>
    <div class="keys keysNum" tabindex="6">7</div>
    <div class="keys keysNum" tabindex="7">8</div>
    <div class="keys keysNum" tabindex="8">9</div>
    <div class="keys keysOp" tabindex="9">-</div>
    <div class="keys keysNum" tabindex="10">4</div>
    <div class="keys keysNum" tabindex="11">5</div>
    <div class="keys keysNum" tabindex="12">6</div>
    <div class="keys keysOp" tabindex="13">+</div>
    <section id="anomaly-keys-wrapper">
      <section>
        <div class="keys keysNum" tabindex="14">1</div>
        <div class="keys keysNum" tabindex="15">2</div>
        <div class="keys keysNum" tabindex="16">3</div>
        <div class="keys long keysNum" tabindex="17">0</div>
        <div class="keys" tabindex="18">.</div>
      </section>
      <section>
        <div class="keys tall" tabindex="19">=</div>
      </section>
    </section>
  </div>
</div>

将不均匀的钥匙包裹在自己的柔性容器中，然后从那里开始......

* { box-sizing: border-box; }                                      /* 1 */

.flexBoxContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.calculator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
}

.calculator .keys {
    border: red 1px solid;
    height: 50px;
    width: 25%;
    break-inside: avoid;
}

.calculator input {
    height: 100px;
    width: 100%;
    direction: rtl;
}

#anomaly-keys-wrapper {                                            /* 2 */
    display: flex;
    width: 100%; 
}

#anomaly-keys-wrapper > section:first-child {                      /* 3 */
    display: flex;
    flex-wrap: wrap;
    width: 75%;
}

#anomaly-keys-wrapper > section:first-child > div {                /* 4 */
    flex: 1 0 33.33%;
}

#anomaly-keys-wrapper > section:first-child > div:nth-child(4) {   /* 5 */
    flex-basis: 66.67%;
}

#anomaly-keys-wrapper > section:last-child {                       /* 6 */
    width: 25%;
    display: flex;
    flex-direction: column;
}

#anomaly-keys-wrapper .tall {                                      /* 7 */
    width: 100%;
    flex: 1;
}

@media (min-width: 321px) {
    .calculator {
        width: 320px;
    }
}
<div class="flexBoxContainer">
    <div class="calculator">
        <input />
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <section id="anomaly-keys-wrapper">
            <section>
                <div class="keys"></div>
                <div class="keys"></div>
                <div class="keys"></div>
                <div class="keys long"></div>
                <div class="keys"></div>
            </section>
            <section>
                <div class="keys tall"></div>
            </section>
        </section>
    </div>
</div>

修订版代码笔（带有已编译的 CSS）

Notes:

  1. 包括内边距和边框width / height计算。
  2. 将不均匀的键包装在单独的弹性容器中（默认值flex-direction: row and flex-wrap: nowrap)
  3. Wrap long在一个单独的弹性容器中键入并启用包装（并采取足够的同级来创建相同的高度tall key).
  4. 强制每行最多三个键。
  5. Make long键的宽度是同级宽度的两倍。 （没有使用更简单的long由于特异性较弱而使用类选择器。）
  6. Wrap tall键位于具有垂直方向的单独的弹性容器中。
  7. Make tallkey 消耗容器的所有可用宽度和高度。

UPDATE

来自评论：

你好，1.你能解释一下弹性基础是如何工作的吗？为什么你使用它而不是给长按钮提供宽度。 2、为什么要给flex：1；到高按钮，正如我所读到的，它是默认值。

问题#1：

第一个子部分容器中的键（包含.long）的尺寸为flex: 1 0 33.33%.

这是简写flex-grow: 1, flex-shrink: 0, and flex-basis: 33.33%.

For the .long我们只是覆盖了关键flex-basis组件与66.67%。 （无需重新声明其他两个组件）。

另外，在这种情况下，两者之间确实没有区别width and flex-basis，但是因为我们要重写flex-basis， 我用了flex-basis.

Using width会留下原来的flex-basis: 33.33%完好无损，创建两个width因此，这些规则可能无法扩大.long键，取决于级联中盛行的规则。

完整的解释flex-basis vs. width, see flex-basis 和 width 有什么区别？

问题2：

因为初始值是flex-grow成分是0 (source).

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

带弹性盒的计算器键盘布局 的相关文章

随机推荐

  • 使用 Discord.js 发送消息

    我正在尝试制作一个 Discord 机器人 但我不太理解 Discord js 我的代码如下所示 client on message function message if message content ping client messa

  • 如何在.net中检测麦克风的声音

    我目前有代码来创建位于可用空间中的网络摄像头 并根据我通过按键盘上的按键设置的标志自动向上或向下移动 我希望能够做到这一点 以便如果在麦克风上检测到声音 高于某个阈值 这样它就不会只是拾取噪音 那么该标志就会设置为 true 如果声音停止

  • 如何找出.NET 4中实体框架中的字段最大长度？

    根据this问题是 EF v1 中没有内置方法来计算字段的长度 有没有built in在 NET 4 附带的实体框架中执行此操作的方法 如果是这样 如何实现 EF 4 0 中没有新的方法来访问属性的长度 您仍然需要遍历元数据 如图所示在您引

  • 在 Python 2.6 中使用 unicode_literals 有什么问题吗？

    我们已经让我们的代码库在 Python 2 6 下运行 为了准备 Python 3 0 我们开始添加 from future import unicode literals 进入我们的 py文件 当我们修改它们时 我想知道是否还有其他人这样

  • R Shiny：单击按钮上传文件

    我知道网络上已经有很多材料可以回答我的问题 但似乎没有一个对我有用 我想那是因为我不太了解 Shiny 的响应式编程 因此 我希望创建一个界面 让用户使用以下命令选择文件fileInput只需单击 上传 按钮即可上传 我尝试了来自各个论坛的

  • 在 asp.net 中只能将 ScriptManager 的一个实例添加到页面中

    当我尝试添加用户控件时出现此错误 只能将 ScriptManager 的一个实例添加到页面中 Code ascx

  • web2py数据库中的表示格式

    db define table person Field name format name s 这个格式在这里有什么作用 The format参数用于确定如何显示引用 person 表的其他表中的字段 例如 如果您定义 db define

  • 字符串在 Java 源代码中何时何地初始化/存储？

    这是我的源代码 public class Koray public static void main String args System out println This is a sample program 当我编译它时 我得到了字节

  • 如何在node.js中实现登录验证

    我有这个节点服务器正在运行 var server http createServer function request responsehttp if request method POST var body request on data

  • 如何测试类型是否是匿名的？ [复制]

    这个问题在这里已经有答案了 我有以下方法将对象序列化为 HTML 标记 我只想在类型不是匿名的情况下执行此操作 private void MergeTypeDataToTag object typeData if typeData null

  • 从映射驱动器或共享文件夹运行 .NET 程序

    我编写了一个 C Windows 窗体应用程序 用于将一台计算机上的远程文件夹 源 文件夹是映射驱动器 Z folder 中的文件和文件夹与另一台计算机上的另一个远程文件夹 目标 合并文件夹是共享文件夹的 UNC 路径 computerna

  • 为什么我们总是喜欢在SQL语句中使用参数？

    我对数据库工作非常陌生 现在我可以写了SELECT UPDATE DELETE and INSERT命令 但我见过很多论坛 我们更喜欢这样写 SELECT empSalary from employee where salary salar

  • 如何将文件从远程服务器中的目录 A 移动到目录 B？

    我正在使用 JSch 连接到由 GWT 制作的网站中的 SFTP 我读过一个小例子sftpChannel get sftpChannel rename sftpChannel rm 但我没有找到从远程服务器复制文件的解决方案a目录到远程服务

  • 无法在此事件处理程序中执行操作

    我正在尝试从 DataGridView 中删除一行我使用两种类型的指令 A VouchersDGV Rows Clear B If Not DGV Rows RowIndex IsNewRow Then DGV Rows RemoveAt

  • Matlab 中的高效分类

    我有一张尺寸为 RGB 的图像uint8 576 720 3 我想将每个像素分类为一组颜色 我已经使用rgb2lab从RGB空间到LAB空间 然后删除L层 所以现在是double 576 720 2 由AB组成 现在 我想将其分类为我在另一

  • 总线错误排查

    我正在尝试反转字符串 这是我尝试过的代码 include

  • 编写 C++ 版本的代数游戏 24

    我正在尝试编写一个像游戏 24 一样工作的 C 程序 对于那些不知道如何玩的人 基本上你会尝试通过 四个代数运算符找到 4 个数字总计为 24 的任何方法 和括号 举个例子 假设有人输入 2 3 1 5 2 3 5 1 24 由于括号位置的

  • ADB 安装失败并显示 INSTALL_FAILED_TEST_ONLY

    我在将 apk 安装到我的设备时遇到问题 adb install lt apk gt 使用上述命令将返回以下内容 5413 KB s 99747 bytes in 0 017s pkg data local tmp AppClient Te

  • SQL 的扩展占位符，例如id 在哪里 (??)

    赏金更新 已经从马克那里得到了很好的答案 将 改编为 如下 然而 除了 DBIx 之外 我仍在寻找类似的方案 我只是想兼容anything 我需要有关我为参数化 SQL 语句中的 扩展 占位符选择的语法的建议 因为构建一些构造 IN 子句

  • 带弹性盒的计算器键盘布局

    我正在用 Flexbox 构建一个计算器 我想要其中一个键的高度是两倍 另一个键的宽度是两倍 我用谷歌搜索了很多 但找不到这两个案例 对于两倍高度的键 我发现的唯一答案是flex direction as column 但在这种情况下 我将

热门标签