-1
필자는 Flex를 계속 학습합니다. 코드가이 문제를 해결하는 데 더 효과적이라고 생각합니다.플렉스 - 남은 공간에 가로로 요소 정렬
https://codepen.io/kayote/pen/PzdXLQ
나는 숫자 컨테이너와 함께 빈 공간으로 이동해야 컨테이너에 두 개의 요소 (C, =)가 있습니다. 나는 flex가 이것을 할 수 있다고 생각한다. 그렇지?
A
답변
2
당신은 몇 가지 작업을 수행해야합니다
- 변경
row에.btnContainer요소의flex-direction속성입니다. .btnContainer요소의justify-content속성을flex-start으로 변경하십시오..numberParent요소의width을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>
1
문제에 대한 간단한 솔루션은 일반 컨테이너에 div.numberParent 및 div.assignParent를 포장하는 것입니다 후이 외부 요소에 display: flex 설정만큼 간단합니다. 그래서 같은 당신이 flex 수평 "확산"할 수있는 DOM 트리에이 개 요소를 가진 결국이 방법 :
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>솔루션 2 번 (별도의 사업부와 상대적인 크기)
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>.row에 이전 솔루션으로
flex-direction을 설정해야하고 다음 버튼의 1 행 당
100%에 따라 2 층과 3 요소
75% 및
25% 용기의
widths을 설정합니다
: 3 년 이후 .numberParent 따라 .assignParent을 (4 중 btns는 당신이 원하는 폭의 75 %를 차지합니다).
+0
감사합니다. robjez 님, shaggy의 해결책은 div가 더 필요하지 않으므로 조금 낫습니다. 그러나 둘 다 유용하기 때문에 두 가지 모두 표결되었습니다. Shaggy의 답변은 추가 개정없이 요구 사항을 충족하므로 받아 들여졌습니다. – Kayote
1
각각 div에 정확하게 주어진 숫자가 flex-basis 인 경우 여기에 flex-wrap: wrap을 사용할 수 있습니다. 마크 업을 건드리지 않고
.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;
}
전체 예 :
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>+1
Havent는 이것을 아직 테스트했지만 재미있게 들리며 감사를 표합니다. – Kayote
관련 문제
- 1. 별도의 div 내에서 가로로 정렬 요소
- 2. 플렉스 자식을 가로로 스크롤
- 3. 가로로 gridview 정렬 가로로 설정해야합니다
- 4. 플렉스 박스를 사용하여 필드 세트의 요소 정렬
- 5. 안드로이드에서 가로로 배열 구성 요소
- 6. 가로로 정렬 된 플로트
- 7. 이미지를 가로로 정렬 CSS
- 8. as3 텍스트를 가로로 정렬
- 9. div에서 가로로 일렬로 정렬
- 10. HTML 요소를 가로로 정렬
- 11. 이미지를 가로로 정렬
- 12. 가로로 div의 중앙에있는 요소
- 13. 입력 요소 채우기 남은 너비
- 14. 플로팅 div로 남은 리메이징 공간에 div 중심 맞춤?
- 15. VB.NET - 이미지 만들기 - 크기 조정하지만 남은 공간에 배경 추가
- 16. 플렉스 대시 보드 구성 요소
- 17. 중간 CSS에서 이미지를 가로로 정렬
- 18. img & text를 가로로 정렬 하시겠습니까?
- 19. 플렉스 배열 정렬
- 20. ArrayCollection의 플렉스 정렬
- 21. 플렉스 사전 정렬
- 22. 플렉스 테이블의 정렬
- 23. D3.js, 가로로 요소 배치
- 24. 플렉스 4의 기본 요소?
- 25. 플렉스 : 구성 요소 변경
- 26. 컨테이너에서 플렉스 요소 감지
- 27. 플렉스 도구 모음 요소
- 28. 플렉스 주행기 구성 요소
- 29. 플렉스 - 구성 요소
- 30. 플렉스 배열 요소
질문 자체에 코드를 게시하시기 바랍니다. –
또한 이것이 ** 보이는 것 **의 이미지입니다. –
당신은'div.numberParent'와'div.assignParent'을 공통 컨테이너에 넣어야합니다. 그러면이 바깥 쪽 요소에'display : flex'를 설정하는 것만큼이나 간단합니다. – robjez