使用flexbox制作计算器键盘布局 [英] Make a calculator keypad layout with flexbox

查看：103
本文介绍了使用flexbox制作计算器键盘布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用flexbox建立一个计算器。我想要它的一个键两倍的高度和另一个键两倍的宽度。



我googled了很多，但无法找到这两种情况在一起。



对于两次高度键，只有我发现的答案是使 flex-direction 为列。但在这种情况下，我将无法使双宽键。



这里是我的代码（在codepen.10）。请帮助。



HTML代码：

 < 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> 
< div class =keys>< / div> 
< div class =keys>< / div> 
< div class =keys>< / div> 
< div class =keys long>< / div> 
< div class =keys big>< / div> 
< div class =keys>< / div> 
< / div> 
< / div>

SCSS代码：

  $ white：rgba（255，255，255，1）; 
 $ aqua：rgba（132，220，198，1）; 
 $ mint：rgba（165，255，214，1）; 
 $ pink：rgba（255，166，158，1）; 
 $ red：rgba（255，104，107，1）; 
 $ gtphone：（min-width：321px）; 
 .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％; 
 @media＃{$ gtphone} {
 width：320px; 
} 
 .keys {
 border：red 1px solid; 
 height：50px; 
 width：24％; 
 break-inside：avoid; 
} 
 .long {
 height：100px！important; 
} 
 .big {
 width：49％！important; 
} 
 input {
 height：100px; 
 width：100％; 
 direction：rtl; 
} 
}


解决方案



  * {box-sizing：border-box; } / * 1 * /。flexBoxContainer {display：flex; justify-content：空间; 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;宽度：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％;显示：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>



修订的Codepen （已编译的CSS）



注意：


  1. 在 width中包含填充和边框 / / code>计算。

  2. 在不同的flex容器中包含不均匀的键（默认值 flex-direction：row code> flex-wrap：nowrap ）

  3. 将长键放在单独的弹性容器中足够的兄弟姐妹使用高键创建等高）。

  4. 每行最多可强制三个键。

  5. > long 键两倍的兄弟姐妹的宽度。 （由于特异性较弱，没有使用更简单的 long 类选择器。）

  6. 包装 tall





    7. UPDATE



    评论：




    您好，1.你能解释一下flex基础的工作原理吗？和你为什么使用它，而不是给宽度长按钮。为什么有必要给flex：1;

    问题＃1： p>

    第一个子段容器（包含 .long ）中的键的大小为 flex ：1 0 33.33％。



    这是 flex-grow：1 ， flex-shrink：0 和 flex-basis：33.33％。



    对于 .long 键，我们简单地覆盖 flex-basis $ c> 66.67％。 （没有必要重新声明其他两个组件）。



    此外，在这种情况下，真正没有区别 width 和 flex-basis ，但由于我们覆盖 flex-basis ，我使用 flex-basis 。



    使用 width $ c> flex-basis：33.33％完整，创建两个 width 规则，因此可能无法扩展



    有关 flex-basis 的完整解释， / code>与 width ，请参阅


    因为 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.

    HTML Code :

    <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>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys"></div>
        <div class="keys long"></div>
        <div class="keys big"></div>
        <div class="keys"></div>
    </div>
</div>

    SCSS Code:

    $white: rgba(255, 255, 255, 1);
$aqua: rgba(132, 220, 198, 1);
$mint: rgba(165, 255, 214, 1);
$pink: rgba(255, 166, 158, 1);
$red: rgba(255, 104, 107, 1);
$gtphone: "(min-width : 321px)";
.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%;
    @media #{$gtphone} {
        width: 320px;
    }
    .keys {
        border: red 1px solid;
        height: 50px;
        width: 24%;
        break-inside: avoid;
    }
    .long {
        height: 100px !important;
    }
    .big {
        width: 49% !important;
    }
    input {
        height: 100px;
        width: 100%;
        direction: rtl;
    }
}

    解决方案

    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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆