那些遇到过的问题

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

Suy*_*ati 5 html css flexbox

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

  });
});
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Mic*_*l_B 4

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

* { 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;
    }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

修订后的 Codepen（带有已编译的 CSS）

笔记：

  1. width在/计算中包括填充和边框height。
  2. 将不均匀的键包装在单独的 Flex 容器中（使用默认值flex-direction: row和flex-wrap: nowrap）
  3. 将长键包裹在启用包裹的单独弹性容器中（并采用足够的同级来创建与高键相同的高度）。
  4. 强制每行最多三个键。
  5. 将长键设置为同级键宽度的两倍。long（由于特异性较弱，没有使用更简单的类选择器。）
  6. 将高键以垂直方向包裹在单独的柔性容器中。
  7. 使高键消耗容器的所有可用宽度和高度。

更新

来自评论：

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

问题#1：

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

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

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

width另外，在这种情况下和之间确实没有区别flex-basis，但由于我们要覆盖flex-basis，所以我使用了flex-basis。

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

flex-basis有关vs.的完整说明width，请参阅flex-basis 和 width 之间有什么区别？

问题2：

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

归档时间：

查看次数：

7247 次

最近记录：

8 年，4 月 前
flex-basis和width之间有什么区别？ 196
更多相关链接
相关归档
CSS媒体查询:max-width OR max-height 463
你怎么做div"tabbable"？ 82
如何在<tr>标签上获取css背景颜色以跨越整行 51
如何使用Flexbox对齐一个弹性项目并右对齐另一个弹性项目 45
内容短缺或丢失时如何将页脚推到页面底部？ 35
使用CSS的图像内边框？ 35
如何修复“请求的模块未提供名为“默认”的导出”？ 33
使用SCSS/Sass作为Angular 6+(styleExt)中的默认样式表 21
如何在IE8中摆脱iframe的边框 18
当window.history.back()被调用时如何维护用户输入？ 18
难疑归档
为什么HTML认为"chucknorris"是一种颜色？ 7264
为什么打印"B"比打印"#"要慢得多？ 2662
为什么我不应该在PHP中使用mysql_*函数？ 2432
如何检测元素外部的单击？ 2367
如何克隆或复制列表？ 2289
何时使用虚拟析构函数？ 1420
你怎么能加速Eclipse？ 1258
如何分析Python脚本？ 1203
简单的面试问题变得更难:给出数字1..100,找到丢失的数字 1115
查找包含具有指定名称的列的所有表 - MS SQL Server 1090