带Flexbox的计算器键盘布局

Question

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

我对此进行了很多搜索，但找不到一起找到这两种情况。

对于高度的两倍关键，只有答案，我发现是使flex-direction作为column。但是在那种情况下，我将无法制作双倍宽度的键。

这是我的代码（在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>

Answer 1

将凹凸不平的钥匙包装在自己的伸缩容器中，然后从那里去。

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

笔记：

1. 在width/ height计算中包括填充和边框。
2. 将不均匀的键包装在单独的flex容器中（默认值flex-direction: row和flex-wrap: nowrap）
3. 在启用了环绕功能的情况下，将 长 键包裹在一个单独的flex容器中（并吸收足够的同级物以与 高 键产生相等的高度）。
4. 每行最多强制三个键。
5. 用 长 两倍于兄弟姐妹宽度的 长 键。（long由于特异性较弱，因此未使用较简单的类选择器。）
6. 将 高 钥匙包在垂直方向的单独的伸缩容器中。
7. 使 高 钥匙消耗所有可用宽度和高度的容器。

更新

从评论：

嗨，1.您能解释一下弹性基准的工作原理吗？以及为什么使用它而不是将宽度设置为长按钮。2.为什么需要给出flex：1;
到高大的按钮，因为我读过它是默认值。

问题1：

第一子节容器（包含.long）中的键的大小为flex: 1 0 33.33%。

这是简写flex-grow: 1，flex-shrink: 0和flex-basis: 33.33%。

对于.long键，我们只是使用覆盖该flex-basis组件66.67%。（无需重新声明其他两个组件）。

另外，在这种情况下，width和之间确实没有任何区别flex-basis，但是由于我们已经覆盖flex-basis，因此我使用flex- basis。

使用width将flex-basis:33.33%保持原始状态不变，创建两个width规则，因此可能无法扩展.long密钥，具体取决于级联中占主导地位的规则。

有关flex-basisvs. 的完整说明width，请参见 *flex-basis和width有什么区别？

问题2：

因为flex-grow组件的初始值为0source。