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

Question

我一边学习Flex一边学习。我认为代码可以更好地解释这个问题。

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

我在容器中有两个元素（C，=），需要将这些元素移动到数字容器旁边的空白区域。我认为flex可以做到这一点，是吗？

Answer 1

你需要做一些事情：

1. 将flex-direction元素的.btnContainer属性更改为row。
2. 将justify-content元素的.btnContainer属性更改为flex-start。
3. 按width减少.numberParent元素的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树上找到2个元素，你可以“传播”＃34;水平与flex，如下：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;    

解决方案2号（没有额外的div，具有相对大小）

＆＃13;

＆＃13;

const curVal = document.getElementById( "curVal" );
const totalVal = document.getElementById( "totalVal" );
let result = 0,
		curTotalArr = [],
		curValArr = [  ];

const updateCurVal = function( e ){
	var str = curValArr.join( "" );
	console.log( str );
	if( curValArr.join( "" ).match( /([-+\/x])/g )){
		curTotalArr.push( curValArr );
		totalVal.textContent = mergeArr();		
		console.log( "curTotalArr", curTotalArr );
		curValArr = [  ];
	}
	console.log( "curTotalArr is...", curTotalArr );
	let val = e.target.textContent;
	console.log( val );
	if( val == "." && curValArr.indexOf( "." ) > 0 ){
		return false;
	}
	curValArr.push( val );
	console.log( curValArr );
	curVal.textContent = curValArr.join( "" );
}

const mergeArr = function(){
	let mergeArr1 = [];
	let merger = curTotalArr.map( function( val ){
		mergeArr1.push( val.join(""));	
	});
	console.log( merger );
	return mergeArr1.join( "" );
}

const addOperator = function( e ){
	if( curValArr.join("").match( /([0-9])/g )){
		curTotalArr.push( curValArr );
		totalVal.textContent = mergeArr();		
	}
	let val = e.target.textContent;
	console.log( val );
	curValArr = [ val ];
	curVal.textContent = curValArr.join( "" );
	let arrLength = curTotalArr.length;
	console.log( arrLength );
}

const clearDisplay = function(){
	curTotalArr = [];
	curValArr = [  ];
	curVal.textContent = curValArr.join( "" );
	totalVal.textContent = curTotalArr.join( "" );
}

const displayResult = function(){
	
}

＆＃13;

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 : row;
	flex-wrap : wrap;
	justify-content : flex-end;
	align-items : space-between;
	align-content : space-between;
}
.operatorParent {
	width:100%;
}
.numberParent {
	width : 75%;
}
.assignParent {
	width: 25%;
}
.btn {
	display : inline-block;
	width : 58px;
	height : 60px;
	font-size : 30px;
	line-height : 40px;
	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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您需要像flex-direction之前的解决方案一样设置.row，然后将widths容器相应地设置为100%每第1行按钮，然后在第2和第3个元素上75%和25%：相应.numberParent和.assignParent（因为4个中的3个btns为您提供75％的宽度，您希望它们占据）。

Answer 3

如果您为每个flex-wrap: wrap提供正确比例的div，则可以在此使用flex-basis。

如果不触及标记，您需要的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 {
	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;
}

.btn {
	width : 60px;
	height : 60px;
	font-size : 30px;
	text-align: center;
	line-height : 40px;
	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;
}


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