css - 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 元素的宽度 减少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>