Ich lerne Flex, während ich mitfahre. Ich denke, der Code wird das Problem besser erklären.Flex - Ausrichten von Elementen horizontal im verbleibenden Raum
https://codepen.io/kayote/pen/PzdXLQ
Ich habe zwei Elemente (C, =) in einem Behälter, der in den leeren Raum neben den Zahlen Behälter bewegt werden müssen. Ich denke Flex kann das, oder?
Sie müssen ein paar Dinge tun:
flex-direction Eigenschaft des .btnContainer Elements row.justify-content Eigenschaft des Elements .btnContainer zu flex-start.width der .numberParent Element von 12px.body {
background-color: #444;
font-family: 'Reem Kufi', sans-serif;
font-size: 10px;
color: #000;
text-shadow: 0 0 1px #c1c1c1;
}
#calcParent {
display: block;
width: 300px;
height: 500px;
background-color: white;
margin: 12px auto;
border: 3px solid #1a1a1a;
border-radius: 3px;
}
#display {
display: block;
position: relative;
width: 100%;
background-color: #999;
height: 66px;
text-align: : right;
border-color: #3a3a3a;
border-width: 2px 2px 4px;
border-style: solid;
}
#curVal {
font-size: 33px;
text-align: right;
line-height: 66px;
padding: 0 9px;
}
#totalVal {
font-size: 18px;
text-align: left;
position: absolute;
top: 0px;
left: 6px;
color: #333;
}
.btnContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: space-between;
align-content: space-between;
}
.numberParent {
width: calc(80% - 12px);
}
.assignParent {
width: 20%;
}
.btn {
display: inline-block;
width: 60px;
height: 60px;
font-size: 30px;
line-height: 60px;
background-color: gold;
margin: 6px;
border: 1px solid black;
border-radius: 3px;
text-align:center;
}
.btnDblHor {
width: 133px;
height: 60px;
}
.btnDblVer {
height: 133px;
width: 60px;
line-height: 133px;
}
.btn:hover {
background-color: yellow;
color: black;
border: 1px solid #cc9933;
}<div id="calcParent">
<div id="display">
<div id="curVal"></div>
<div id="totalVal"></div>
</div>
<div class="btnContainer">
<div class="operatorParent">
<div class="btn" onclick="addOperator(event)">/</div>
<div class="btn" onclick="addOperator(event)">x</div>
<div class="btn" onclick="addOperator(event)">-</div>
<div class="btn" onclick="addOperator(event)">+</div>
</div>
<div class="numberParent">
<div class="btn" onClick="updateCurVal(event)">9</div>
<div class="btn" onClick="updateCurVal(event)">8</div>
<div class="btn" onClick="updateCurVal(event)">7</div>
<div class="btn" onClick="updateCurVal(event)">6</div>
<div class="btn" onClick="updateCurVal(event)">5</div>
<div class="btn" onClick="updateCurVal(event)">4</div>
<div class="btn" onClick="updateCurVal(event)">3</div>
<div class="btn" onClick="updateCurVal(event)">2</div>
<div class="btn" onClick="updateCurVal(event)">1</div>
<div class="btn btnDblHor" onClick="updateCurVal(event)">0</div>
<div class="btn" onClick="updateCurVal(event)">.</div>
</div>
<div class="assignParent">
<div class="btn btnDblVer" onClick="clearDisplay()">C</div>
<div class="btn btnDblVer" onClick="">=</div>
</div>
</div>
</div>einfachste Lösung für Ihr Problem div.numberParent und div.assignParent gemeinsam Behälter zu wickeln wäre und es ist dann so einfach wie display: flex auf diesem äußeren Elemente zu setzen. Auf diese Weise können zwei Elemente auf dem DOM-Baum am Ende mit, die Sie horizontal mit flex "Spread" kann, wie so:
body {
background-color: #444;
font-family: 'Reem Kufi', sans-serif;
font-size: 10px;
color: #000;
text-shadow: 0 0 1px #c1c1c1;
}
#calcParent {
display: block;
width: 300px;
height: 440px;
background-color: white;
margin: 12px auto;
border: 3px solid #1a1a1a;
border-radius: 3px;
}
#display {
display: block;
position: relative;
width: 100%;
background-color: #999;
height: 66px;
text-align: : right;
border-color: #3a3a3a;
border-width: 2px 2px 4px;
border-style: solid;
}
#curVal {
font-size: 33px;
text-align: right;
line-height: 66px;
padding: 0 9px;
}
#totalVal {
font-size: 18px;
text-align: left;
position: absolute;
top: 0px;
left: 6px;
color: #333;
}
.btnContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
align-items: space-between;
align-content: space-between;
}
.operatorParent {} .numberParent {
width: 80%;
}
.assignParent {
width: 20%;
}
.btn {
display: inline-block;
width: 58px;
height: 58px;
font-size: 30px;
line-height: 58px;
text-align: center;
background-color: gold;
margin: 6px;
border: 1px solid black;
border-radius: 3px;
}
.btnDblHor {
width: 133px;
height: 60px;
}
.btnDblVer {
height: 133px;
width: 60px;
line-height: 133px;
}
.btn:hover {
background-color: yellow;
color: black;
border: 1px solid #cc9933;
}
.flex {
display: flex;
}<div id="calcParent">
<div id="display">
<div id="curVal"></div>
<div id="totalVal"></div>
</div>
<div class="btnContainer">
<div class="operatorParent">
<div class="btn" onclick="addOperator(event)">/</div>
<div class="btn" onclick="addOperator(event)">x</div>
<div class="btn" onclick="addOperator(event)">-</div>
<div class="btn" onclick="addOperator(event)">+</div>
</div>
<div class="flex">
<div class="numberParent">
<div class="btn" onClick="updateCurVal(event)">9</div>
<div class="btn" onClick="updateCurVal(event)">8</div>
<div class="btn" onClick="updateCurVal(event)">7</div>
<div class="btn" onClick="updateCurVal(event)">6</div>
<div class="btn" onClick="updateCurVal(event)">5</div>
<div class="btn" onClick="updateCurVal(event)">4</div>
<div class="btn" onClick="updateCurVal(event)">3</div>
<div class="btn" onClick="updateCurVal(event)">2</div>
<div class="btn" onClick="updateCurVal(event)">1</div>
<div class="btn btnDblHor" onClick="updateCurVal(event)">0</div>
<div class="btn" onClick="updateCurVal(event)">.</div>
</div>
<div class="assignParent">
<div class="btn btnDblVer" onClick="clearDisplay()">C</div>
<div class="btn btnDblVer" onClick="">=</div>
</div>
</div>
</div>
</div>Lösung No.2 (keine extra div, mit relative Bemessung)
const curVal = document.getElementById("curVal");
const totalVal = document.getElementById("totalVal");
let result = 0,
\t \t curTotalArr = [],
\t \t curValArr = [ ];
const updateCurVal = function(e){
\t var str = curValArr.join("");
\t console.log(str);
\t if(curValArr.join("").match(/([-+\/x])/g)){
\t \t curTotalArr.push(curValArr);
\t \t totalVal.textContent = mergeArr(); \t \t
\t \t console.log("curTotalArr", curTotalArr);
\t \t curValArr = [ ];
\t }
\t console.log("curTotalArr is...", curTotalArr);
\t let val = e.target.textContent;
\t console.log(val);
\t if(val == "." && curValArr.indexOf(".") > 0){
\t \t return false;
\t }
\t curValArr.push(val);
\t console.log(curValArr);
\t curVal.textContent = curValArr.join("");
}
const mergeArr = function(){
\t let mergeArr1 = [];
\t let merger = curTotalArr.map(function(val){
\t \t mergeArr1.push(val.join("")); \t
\t });
\t console.log(merger);
\t return mergeArr1.join("");
}
const addOperator = function(e){
\t if(curValArr.join("").match(/([0-9])/g)){
\t \t curTotalArr.push(curValArr);
\t \t totalVal.textContent = mergeArr(); \t \t
\t }
\t let val = e.target.textContent;
\t console.log(val);
\t curValArr = [ val ];
\t curVal.textContent = curValArr.join("");
\t let arrLength = curTotalArr.length;
\t console.log(arrLength);
}
const clearDisplay = function(){
\t curTotalArr = [];
\t curValArr = [ ];
\t curVal.textContent = curValArr.join("");
\t totalVal.textContent = curTotalArr.join("");
}
const displayResult = function(){
\t
}body {
\t background-color: #444;
\t font-family: 'Reem Kufi', sans-serif;
\t font-size : 10px;
\t color : #000;
\t text-shadow : 0 0 1px #c1c1c1;
}
#calcParent {
\t display : block;
\t width : 300px;
\t height : 440px;
\t background-color : white;
\t margin : 12px auto;
\t border : 3px solid #1a1a1a;
\t border-radius : 3px;
}
#display {
\t display : block;
\t position: relative;
\t width : 100%;
\t background-color : #999;
\t height : 66px;
\t text-align: : right;
\t border-color : #3a3a3a;
\t border-width : 2px 2px 4px;
\t border-style : solid;
}
#curVal {
\t font-size : 33px;
\t text-align : right;
\t line-height : 66px;
\t padding : 0 9px;
}
#totalVal {
\t font-size : 18px;
\t text-align: left;
\t position: absolute;
\t top: 0px;
\t left : 6px;
\t color : #333;
}
.btnContainer {
\t display : flex;
\t flex-direction : row;
\t flex-wrap : wrap;
\t justify-content : flex-end;
\t align-items : space-between;
\t align-content : space-between;
}
.operatorParent {
\t width:100%;
}
.numberParent {
\t width : 75%;
}
.assignParent {
\t width: 25%;
}
.btn {
\t display : inline-block;
\t width : 58px;
\t height : 60px;
\t font-size : 30px;
\t line-height : 40px;
\t background-color : gold;
\t margin : 6px;
\t border : 1px solid black;
\t border-radius : 3px;
}
.btnDblHor {
\t width : 133px;
\t height : 60px;
}
.btnDblVer {
\t height : 133px;
\t width: 60px;
\t line-height : 133px;
}
.btn:hover {
\t background-color : yellow;
\t color : black;
\t border : 1px solid #cc9933;
}<div id="calcParent">
\t <div id="display">
\t \t <div id="curVal"></div>
\t \t <div id="totalVal"></div>
\t </div>
\t <div class="btnContainer">
\t \t <div class="operatorParent">
\t \t \t <div class="btn" onclick="addOperator(event)">/</div>
\t \t \t <div class="btn" onclick="addOperator(event)">x</div>
\t \t \t <div class="btn" onclick="addOperator(event)">-</div>
\t \t \t <div class="btn" onclick="addOperator(event)">+</div>
\t \t </div>
\t \t <div class="numberParent">
\t \t \t <div class="btn" onClick="updateCurVal(event)">9</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">8</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">7</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">6</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">5</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">4</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">3</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">2</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">1</div>
\t \t \t <div class="btn btnDblHor" onClick="updateCurVal(event)">0</div>
\t \t \t <div class="btn" onClick="updateCurVal(event)">.</div>
\t \t </div>
\t \t <div class="assignParent">
\t \t \t <div class="btn btnDblVer" onClick="clearDisplay()">C</div>
\t \t \t <div class="btn btnDblVer" onClick="">=</div>
\t \t </div>
\t </div>
</div>Wo Sie flex-direction wie in früheren Lösung .row, einzustellen brauchen, und dann die widths von Containern entsprechend 100% pro 1. Reihe von Schaltflächen Satz, dann 75% und 25% am 2. und 3. Elemente: .numberParent und .assignParent entsprechend (seit 3 Btns von 4 gibt Ihnen 75% der Breite, die Sie belegen möchten.
danke robjez, Shaggy's Lösung ist ein bisschen besser, da es kein zusätzliches div benötigt. Beide sind jedoch nützlich, so dass beide gewählt wurden. Shaggys Antwort wurde akzeptiert, da sie die Anforderung ohne weitere Änderungen erfüllt. – Kayote
Sie können flex-wrap: wrap zu Ihrem Vorteil hier verwenden, wenn Sie jedem div einen richtig proportionierten flex-basis geben.
Ohne das Markup zu berühren, die Flexbox Stile, die Sie benötigen, sind:
.btnContainer,
.operatorParent,
.number-assign,
.numberParent,
.assignParent {
display : flex;
justify-content: space-between;
}
.btnContainer {
flex-wrap: wrap;
}
.operatorParent {
flex: 1 0 100%;
}
.numberParent {
flex: 1 0 75%;
flex-wrap: wrap;
}
.assignParent {
flex: 1 0 25%;
flex-direction : column;
}
vollständiges Beispiel:
body {
\t background-color: #444;
\t font-family: 'Reem Kufi', sans-serif;
\t font-size : 10px;
\t color : #000;
\t text-shadow : 0 0 1px #c1c1c1;
}
#calcParent {
\t display : block;
\t width : 300px;
\t height : 440px;
\t background-color : white;
\t margin : 12px auto;
\t border : 3px solid #1a1a1a;
\t border-radius : 3px;
}
#display {
\t display : block;
\t position: relative;
\t width : 100%;
\t background-color : #999;
\t height : 66px;
\t text-align: : right;
\t border-color : #3a3a3a;
\t border-width : 2px 2px 4px;
\t border-style : solid;
}
#curVal {
\t font-size : 33px;
\t text-align : right;
\t line-height : 66px;
\t padding : 0 9px;
}
#totalVal {
\t font-size : 18px;
\t text-align: left;
\t position: absolute;
\t top: 0px;
\t left : 6px;
\t color : #333;
}
.btn {
\t width : 60px;
\t height : 60px;
\t font-size : 30px;
\t text-align: center;
\t line-height : 40px;
\t background-color : gold;
\t margin : 6px;
\t border : 1px solid black;
\t border-radius : 3px;
}
.btnDblHor {
\t width : 133px;
\t height : 60px;
}
.btnDblVer {
\t height : 133px;
\t width: 60px;
\t line-height : 133px;
}
.btn:hover {
\t background-color : yellow;
\t color : black;
\t border : 1px solid #cc9933;
}
.btnContainer,
.operatorParent,
.number-assign,
.numberParent,
.assignParent {
display : flex;
justify-content: space-between;
}
.btnContainer {
flex-wrap: wrap;
}
.operatorParent {
flex: 1 0 100%;
}
.numberParent {
flex: 1 0 75%;
flex-wrap: wrap;
}
.assignParent {
flex: 1 0 25%;
flex-direction: column;
}<div id="calcParent">
<div id="display">
<div id="curVal"></div>
<div id="totalVal"></div>
</div>
<div class="btnContainer">
<div class="operatorParent">
<div class="btn">/</div>
<div class="btn">x</div>
<div class="btn">-</div>
<div class="btn">+</div>
</div>
<div class="numberParent">
<div class="btn">9</div>
<div class="btn">8</div>
<div class="btn">7</div>
<div class="btn">6</div>
<div class="btn">5</div>
<div class="btn">4</div>
<div class="btn">3</div>
<div class="btn">2</div>
<div class="btn">1</div>
<div class="btn btnDblHor">0</div>
<div class="btn">.</div>
</div>
<div class="assignParent">
<div class="btn btnDblVer">C</div>
<div class="btn btnDblVer">=</div>
</div>
</div>
</div>Havent hat das noch getestet, klingt aber interessant, dankend. – Kayote
Bitte senden Sie Ihren Code in der Frage selbst. –
Auch ein Bild davon, wie das ** aussieht ** aussieht. –
Sie müssen 'div.numberParent' und' div.assignParent' in einen gemeinsamen Container einfügen und dann ist es so einfach wie 'display: flex' auf dieses äußere Element zu setzen – robjez