Keyboard layout calculator with flexbox

Question

I am creating a calculator with flexbox. I want one of his keys to double the height and the other two times the width.

I knew a lot about this, but could not find both cases together.

For a double-height key, only the answers I found were to make flex-direction like column . But in this case, I can not make a double-width key.

Here is my code (on codepen.io). Please, help.

 $(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

Wrap the jagged keys in your own containers for flexible containers and 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:

• Include padding and borders in width / height calculations.
• Wrap the jagged keys in a separate container for flexible containers (default flex-direction: row and flex-wrap: nowrap )
• Wrap the long key in a separate flexible container with the packaging on (and take enough siblings to create an equal height with a high key).
• Configure the three keys on the max string.
• Make a long key twice the width of your siblings. (Did not use a simpler long selector due to weaker specificity.)
• Insert the high key into a separate floppy disk container with a vertical orientation.
• Making a high key consumes the entire available width and height of the container.

---

UPDATE

From the comments:

Hi 1. Can you explain to me how the bend base works? and why you used it instead of giving width to a long button. 2. Why is it necessary to give flex: 1; to the high button, since I read this default value.

Question number 1:

The keys in the first subsection container (containing .long ) have a flex: 1 0 33.33% size of flex: 1 0 33.33% .

This is short for flex-grow: 1 , flex-shrink: 0 and flex-basis: 33.33% .

For the .long key .long we simply redefine the flex-basis component 66.67% . (no need to re-declare two other components).

In addition, there is no difference in this case between width and flex-basis , but since we are redefining flex-basis , I used flex-basis .

Using width will leave the original flex-basis: 33.33% intact, creating two width rules that may therefore not expand the .long , depending on which rule prevails in the cascade.

For a full explanation of flex-basis vs. width see. What is the difference between a flexible base and a width?

Question number 2:

Since the initial value of the flex-grow component is 0 ( source ).

Answer 2

There is no general answer that I can come up with, but it is as close as possible.

I modified your code to use float instead of flexbox model layout. This is less modern, but seems to be a viable workaround for this particular problem, with virtually no negative consequences.

Note that I also changed the width buttons to buttons to actually take up all the space that they can, and gave them box-sizing of border-box . Read more about it 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; } }