Вопрос по флексам

Question

Как переместить знак равно, после чисел 9,6,3,С, смотрите на прикрепленном рисунке ?

.calculator{
   width: 500px;
   background: #F08080;
   border: 1px solid black;  
   position: relative;
}

.input{
    height: 50px;
    background: skyblue;
    margin: 5px;
}

.operators{
    display: flex;
}


.operators1{
    height: 50px;
    flex: 25%;
    background: skyblue;
    margin:5px;
}


.numbers{
    display: flex;
    flex: 25%;
}
.number1{
    height: 50px;
    margin: 5px;
    background: skyblue;
    flex:25%;
    
}
.equal{
    background: skyblue;
    height: 150px;
    margin: 5px;
    
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet" href="calc.css" />
    <script src="calc.js"></script>
</head>

<body>
   <div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div class="operators1">+</div>
      <div class="operators1">-</div>
      <div class="operators1">&times;</div>
      <div class="operators1">&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div class="number1">7</div>
        <div class="number1">8</div>
        <div class="number1">9</div>
      </div>
      <div class="numbers">
        <div class="number1">4</div>
        <div class="number1">5</div>
        <div class="number1">6</div>
      </div>
      <div class="numbers">
        <div class="number1">1</div>
        <div class="number1">2</div>
        <div class="number1">3</div>
      </div>
      <div class="numbers">
        <div class="number1">0</div>
        <div class="number1">.</div>
        <div class="number1" id="clear">C</div>
      </div>
      <div class="equal" id="result">=</div>
    </div>
  </div>
</div>
</body>

</html>

Answer 1

   <div class="leftPanel">
       <div class="first_block"> 
          <div class="numbers">
            <div class="number1">7</div>
            <div class="number1">8</div>
            <div class="number1">9</div>
          </div>
          <div class="numbers">
            <div class="number1">4</div>
            <div class="number1">5</div>
            <div class="number1">6</div>
          </div>
          <div class="numbers">
            <div class="number1">1</div>
            <div class="number1">2</div>
            <div class="number1">3</div>
          </div>
          <div class="numbers">
            <div class="number1">0</div>
            <div class="number1">.</div>
            <div class="number1" id="clear">C</div>
          </div>
       </div>
       <div class="equal" id="result">=</div>
  </div>



.leftPanel {
       display: flex;
   }

Answer 2

Если разметку не менять, то как вариант так:

.calculator{
   width: 500px;
   background: #F08080;
   border: 1px solid black;  
   position: relative;
}

.input{
    height: 50px;
    background: skyblue;
    margin: 5px;
}

.operators{
    display: flex;
}


.operators1{
    height: 50px;
    flex: 25%;
    background: skyblue;
    margin:5px;
}

.leftPanel {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 240px;
}

.numbers{
display: flex;
flex-grow: 1;
width: 75%;
}
.number1{
    height: 50px;
    margin: 5px;
    background: skyblue;
    flex:25%;
    
}
.equal{
    background: skyblue;
    height: 240px;
    margin: 5px;
    width: calc(25% - 10px);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet" href="calc.css" />
    <script src="calc.js"></script>
</head>

<body>
   <div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div class="operators1">+</div>
      <div class="operators1">-</div>
      <div class="operators1">&times;</div>
      <div class="operators1">&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div class="number1">7</div>
        <div class="number1">8</div>
        <div class="number1">9</div>
      </div>
      <div class="numbers">
        <div class="number1">4</div>
        <div class="number1">5</div>
        <div class="number1">6</div>
      </div>
      <div class="numbers">
        <div class="number1">1</div>
        <div class="number1">2</div>
        <div class="number1">3</div>
      </div>
      <div class="numbers">
        <div class="number1">0</div>
        <div class="number1">.</div>
        <div class="number1" id="clear">C</div>
      </div>
      <div class="equal" id="result">=</div>
    </div>
  </div>
</div>
</body>

</html>

БЛОГ НА HUSL

Вопрос по флексам

Ответы (2 шт):