带有flexbox的计算器键盘布局

时间：2016-08-22 12:38:00

标签： html css html5 css3 flexbox

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

我搜索了很多关于它的信息，但却找不到两个案例。

对于两倍高度的密钥，我找到的答案只有flex-direction为column。但在那种情况下，我将无法制作双倍宽度键。

这是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>

2 个答案:

答案 0 :(得分：3)

将不均匀的钥匙包裹在自己的弹性容器中并从那里开始...... 

* { 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（使用已编译的CSS）

注意：

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

    8. <强>更新

    来自评论：

      

    嗨，1。你能解释一下flex基础是如何工作的吗？为什么你使用它而不是给长按钮宽度。 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-basis与width的完整说明，请参阅 What are the differences between flex-basis and width?

    问题＃2：

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

答案 1 :(得分：2)

我没有提出一个通用的答案，但这是我能得到的最接近的答案。

我已修改您的代码以使用浮动而不是flexbox布局模型。这不太现代，但似乎是解决这一特定问题的可行方法，几乎​​没有负面影响。

  

请注意，我还修改了按钮的width以实际占用他们可以占用的所有空间，并为他们提供了box-sizing border-box。有关here的更多信息。

https://codepen.io/anon/pen/VjOKGX 

.calculator {
    // Required to keep the buttons inside
    overflow: hidden;
    width: 100%;
    @media #{$gtphone} {
        width: 320px;
    }
    .keys {
        // Changes the box model so that width includes the borders too
        box-sizing: border-box;
        border: red 1px solid;
        height: 50px;
        // The width is modified to take up all the space
        width: 25%;
        // Floating is defined
        float: left;
        break-inside: avoid;
    }
    .long {
        // This one needs float to be set to right,
        // so that other elements may be on its left in multiple rows
        float: right;
        height: 100px !important;
    }
    .big {
        // Again, width is modified
        width: 50% !important;
    }
    input {
        height: 100px;
        width: 100%;
        direction: rtl;
    }
}
相关问题
最新问题