Kayote Kayote - 4 months ago 8
CSS Question

Flex - Align Elements Horizontally In The Remaining Space

Im learning Flex as I go along. I think the code will do a better job of explaing the issue.

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

I have two elements (

C
,
=
) in a container which need to be moved to the empty space alongside the numbers container. I think flex can do this, can it?

Answer

You need to do a few things:

  1. Change the flex-direction property of the .btnContainer element to row.
  2. Change the justify-content property of the .btnContainer element to flex-start.
  3. Reduce the width of the .numberParent element by 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>