带有 flexbox 的计算器键盘布局 [英] Calculator keypad layout with flexbox

问题描述

我正在用 flexbox 构建一个计算器.我想要它的一个键是高度的两倍，另一个键是宽度的两倍.

我在谷歌上搜索了很多，但无法同时找到这两种情况.

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

这是我的代码(在 codepen.io 上).请帮忙.

$(function() {var curr = "",上一个 = "";var updateView = function() {$('#curr').html(curr);$('#prev').html(prev);};$('.keysNum').on('click', function(e) {当前 += $(this).html();控制台日志(这个)；更新视图()；});$('.keysOp').on('click', function(e) {});});

.flexBoxContainer {-webkit-touch-callout:无；-webkit-user-select:无；用户选择:无；显示:弹性；justify-content:空间环绕；对齐项目:居中；宽度:100%；最小高度:100vh；}.计算器{显示:弹性；flex-wrap: 包裹;对齐内容:居中；对齐内容:居中；宽度:100%；最小高度:100vh；}@media(最小宽度:321px){.计算器{宽度:320px；}}.calculator .keys {边框:#d3d2cb 0.5px 实心；背景:#fefdff;颜色:#33393d；高度:50px；高度:14.2857142857vh；宽度:25%；行高:14.2857142857vh；文本对齐:居中；字体大小:1.4rem；字体粗细:粗体；过渡:背景 0.2s 线性；}.calculator .keysOp {背景:#f1f1ef；}.calculator .keysC {颜色:#f94913；}.calculator .keys:hover {背景:#d3d2cb；过渡:背景 0s 线性；}.calculator .keys:focus {大纲:无；}.calculator .keys:active {背景:#93938E；}.calculator .screen {背景:#e9e8e5；高度:14.2857142857vh；宽度:100%；行高:14.2857142857vh；方向:rtl；}.calculator .screen:last-child {字体大小:4rem；}.calculator #anomaly-keys-wrapper {显示:弹性；宽度:100%；}.calculator #anomaly-keys-wrapper>section:first-child {显示:弹性；flex-wrap: 包裹;宽度:75%；}.calculator #anomaly-keys-wrapper>section:first-child>div.keys {弹性:1 0 33.33%；}.calculator #anomaly-keys-wrapper>section:first-child>div.long {弹性基础:66.67%；}.calculator #anomaly-keys-wrapper>section:last-child {宽度:25%；显示:弹性；弹性方向:列；}.calculator #anomaly-keys-wrapper>section:last-child>.tall {背景:#f94913；颜色:#fefdff；宽度:100%；行高:28.5714285714vh；弹性:1；}.calculator #anomaly-keys-wrapper>section:last-child>.tall:hover {背景:#c73a0f；}.calculator #anomaly-keys-wrapper>section:last-child>.tall:focus {大纲:无；}.calculator #anomaly-keys-wrapper>section:last-child>.tall:active {背景:#8b280a；}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="样式表"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="flexBoxContainer"><div class="计算器"><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"><部分><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></节><部分><div class="keys high" tabindex="19">=</div></节></节>

解决方案

将不均匀的键包裹在它们自己的 flex 容器中并从那里开始...

* { box-sizing: border-box;}/* 1 */.flexBoxContainer {显示:弹性；justify-content:空间环绕；对齐项目:居中；宽度:100%；}.计算器{显示:弹性；flex-wrap: 包裹;对齐内容:居中；对齐内容:居中；宽度:100%；}.calculator .keys {边框:红色1px实心；高度:50px；宽度:25%；闯入:避免；}.计算器输入{高度:100px；宽度:100%；方向:rtl；}#anomaly-keys-wrapper {/* 2 */显示:弹性；宽度:100%；}#anomaly-keys-wrapper >部分:第一个孩子{/* 3 */显示:弹性；flex-wrap: 包裹;宽度:75%；}#anomaly-keys-wrapper >部分:第一个孩子 >div {/* 4 */弹性:1 0 33.33%；}#anomaly-keys-wrapper >部分:第一个孩子 >div:nth-child(4) {/* 5 */弹性基础:66.67%；}#anomaly-keys-wrapper >部分:最后一个孩子 {/* 6 */宽度:25%；显示:弹性；弹性方向:列；}#anomaly-keys-wrapper .tall {/* 7 */宽度:100%；弹性:1；}@media(最小宽度:321px){.计算器{宽度:320px；}}

<div class="计算器"><输入/><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"><部分><div class="keys"></div><div class="keys"></div><div class="keys"></div><div class="keys long"></div><div class="keys"></div></节><部分><div class="keys high"></div></节></节>

修订后的 Codepen(带有编译的 CSS)

注意事项:

1. 在width/height 计算中包含内边距和边框.
2. 将不均匀的键包裹在一个单独的 flex 容器中(默认为 flex-direction: row 和 flex-wrap: nowrap)
3. 将 long 键包裹在一个单独的 flex 容器中，并启用包裹(并使用足够多的兄弟来创建与 tall 键相等的高度).
4. 强制每行最多三个键.
5. 使长键是兄弟键宽度的两倍.(由于较弱的特异性，没有使用更简单的 long 类选择器.)
6. 将 tall 键包裹在一个单独的垂直方向的 flex 容器中.
7. 使 tall 键消耗容器的所有可用宽度和高度.

<小时>

更新

来自评论:

<块引用>

1. 你能解释一下弹性基础是如何工作的吗?以及为什么使用它而不是为长按钮提供宽度.2. 为什么要给flex: 1;到高按钮，据我所知，它是默认值.

问题 1:

第一个子节容器(包含 .long)中的键的大小使用 flex: 1 0 33.33%.

这是flex-grow:1、flex-shrink:0和flex-basis:33.33%的简写.>

对于 .long 键，我们只是用 66.67% 覆盖了 flex-basis 组件.(无需重新声明其他两个组件).

此外，在这种情况下，width 和 flex-basis 之间确实没有区别，但是由于我们覆盖了 flex-basis，我使用了 flex-basis.

使用 width 会保持原来的 flex-basis: 33.33% 不变，创建两个 width 规则，因此可能无法展开.long 键，取决于级联中的规则.

有关flex-basis 与width 的完整说明，请参阅flex-basis 和宽度有什么区别?

问题 2:

因为flex-grow组件的初始值为0(来源).

I am building a calculator with flexbox. I want one of its keys twice the height and another key twice the width.

I googled much about it but couldn't find both cases together.

For twice height key, only answers I found was to make flex-direction as column. But in that case I will not be able to make double width key.

Here is my code (on codepen.io). Please help.

$(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>

解决方案

Wrap the uneven keys in their own flex containers and go from there...

* { 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>

Revised Codepen (with compiled CSS)

Notes:

1. Include padding and borders in width / height calculations.
2. Wrap uneven keys in a separate flex container (with defaults flex-direction: row and flex-wrap: nowrap)
3. Wrap long key in a separate flex container with wrapping enabled (and take enough siblings to create equal height with tall key).
4. Force three keys per row max.
5. Make long key twice the width of siblings. (Didn't use simpler long class selector due to weaker specificity.)
6. Wrap tall key in a separate flex container with vertical orientation.
7. Make tall key consume all available width and height of container.

---

UPDATE

From the comments:

Hi, 1. Can you explain me how flex basis works? and why did you use it instead of giving width to long button. 2. Why is it necessary to give flex: 1; to tall button, as i have read it is the default value.

Question #1:

The keys in the first sub-section container (containing .long) are sized with flex: 1 0 33.33%.

This is shorthand for flex-grow: 1, flex-shrink: 0, and flex-basis: 33.33%.

For the .long key we are simply overriding the flex-basis component with 66.67%. (there's no need to re-declare the other two components).

Also, there's really no difference in this case between width and flex-basis, but since we're overriding flex-basis, I used flex-basis.

Using width would leave the original flex-basis: 33.33% intact, creating two width rules which may, therefore, fail to expand the .long key, depending on which rule prevails in the cascade.

For a complete explanation of flex-basis vs. width, see What are the differences between flex-basis and width?

Question #2:

Because the initial value of the flex-grow component is 0 (source).

这篇关于带有 flexbox 的计算器键盘布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！