Flex - 在剩余空间水平对齐元素

Question

我一直在学习Flex。我认为代码将会更好地解释这个问题。

https://codepen.io/kayote/pen/PzdXLQ

我有两个元件（C，=）在容器中需要被移动到旁边的数字容器中的空的空间。我认为flex可以做到这一点，可以吗？

Answer 1

你需要做几件事情：

1. 更改.btnContainer元素的flex-direction属性row。
2. 将.btnContainer元素的justify-content属性更改为flex-start。
3. 将.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>

Answer 2

简单的解决方案，您的问题将是包装在公共容器div.numberParent和div.assignParent，然后它作为这个外部元件上设置display: flex那么简单。这样，你最终不得不在DOM树，你可以“传播”，平行flex两个元素，像这样：

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>

方案二（没有额外的div，用相对尺寸）

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>

在那里你会需要设置flex-direction在以前的解决方案，以.row，然后相应地设置容器的widths到100%每1行的按钮，然后在第二和第三要素75%和25%：.numberParent并相应.assignParent（因为3 4中的btns给你75％的宽度，你希望它们占据）。

Answer 3

如果你给每个div一个正确比例的flex-basis，你可以在这里使用flex-wrap: wrap。

无需接触标记，你将需要Flexbox的风格是：

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