带Flexbox的计算器键盘布局

Z时代
2024-01-10
分类：问答

我正在用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>

回答：

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

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

笔记：

在width/ height计算中包括填充和边框。

将不均匀的键包装在单独的flex容器中（默认值flex-direction: row和flex-wrap: nowrap）

在启用了环绕功能的情况下，将长键包裹在一个单独的flex容器中（并吸收足够的同级物以与高键产生相等的高度）。

每行最多强制三个键。

用长两倍于兄弟姐妹宽度的长键。（long由于特异性较弱，因此未使用较简单的类选择器。）

将高钥匙包在垂直方向的单独的伸缩容器中。

使高钥匙消耗所有可用宽度和高度的容器。

从评论：

嗨，1.您能解释一下弹性基准的工作原理吗？以及为什么使用它而不是将宽度设置为长按钮。2.为什么需要给出flex：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有什么区别？

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

以上是带Flexbox的计算器键盘布局的全部内容，来源链接： utcz.com/qa/401780.html

带Flexbox的计算器键盘布局

回答：

其他人也看了：