Flexbox calculator not aligning itself properly

Question

I'm sure calculators are a common project, but I'm really struggling with my use of flexbox here. I have a row class for each calculator button row, and different button sizes. But the last buttons are going down a new line rather than staying in the original line of the row, even though they have enough width.

* {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        padding: 0;
    }
    
    .wrapper {
        display: flex;
        flex-direction: column;
        background-color: #0f0f0f;
        color: #fff;
        width: 400px;
        align-content: stretch;
        justify-content: space-between;
        font-family: Helvetica, Arial, sans-serif;
    }
    
        /* ROWS */
    
    .result-row {
        width: 100%;
        font-family: monospace;
        background-color: #0f0f0f;
        text-align: right;
    }
    
    .row {
        width: 100%;
    }
    
        /* BUTTONS */
    
    .small {
        width: 24.5%;
    }
    
    .medium {
        width: 49.5%;
    }
    
    .large {
        width: 74.5%;
    }
    
    .button {
        border: 0;
        border-radius: 0;
    }

<div class="wrapper">
        <div class="result-row">
            0
        </div>
        <div class="row">
            <button class="medium button">C</button>
            <button class="small button">&#8592;</button>
            <button class="small button">&divide;</button>
        </div>
        <div class="row">
            <button class="small button">7</button>
            <button class="small button">8</button>
            <button class="small button">9</button>
            <button class="small button">X</button>
        </div>
        <div class="row">
            <button class="small button">4</button>
            <button class="small button">5</button>
            <button class="small button">6</button>
            <button class="small button">-</button>
        </div>
        <div class="row">
            <button class="small button">1</button>
            <button class="small button">2</button>
            <button class="small button">3</button>
            <button class="small button">+</button>
        </div>
        <div class="row">
            <button class="large button">0</button>
            <button class="small button">=</button>
        </div>
</div>

I really don't get what is going on here, I thought that elements within a div couldn't take space in a new "line" with flexbox as long as they had enough space in the container.

score 1 · Accepted Answer · answered Mar 05 '20 at 04:07

Since flex children only inherit one level from the parent, you also need to set a flex display on the .rows.

.row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: #0f0f0f;
  color: #fff;
  width: 400px;
  align-content: stretch;
  justify-content: space-between;
  font-family: Helvetica, Arial, sans-serif;
}

/* ROWS */

.result-row {
  width: 100%;
  font-family: monospace;
  background-color: #0f0f0f;
  text-align: right;
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

/* BUTTONS */

.small {
  width: 24.5%;
}

.medium {
  width: 49.5%;
}

.large {
  width: 74.5%;
}

.button {
  border: 0;
  border-radius: 0;
}

<div class="wrapper">
  <div class="result-row">
    0
  </div>
  <div class="row">
    <button class="medium button">C</button>
    <button class="small button">&#8592;</button>
    <button class="small button">&divide;</button>
  </div>
  <div class="row">
    <button class="small button">7</button>
    <button class="small button">8</button>
    <button class="small button">9</button>
    <button class="small button">X</button>
  </div>
  <div class="row">
    <button class="small button">4</button>
    <button class="small button">5</button>
    <button class="small button">6</button>
    <button class="small button">-</button>
  </div>
  <div class="row">
    <button class="small button">1</button>
    <button class="small button">2</button>
    <button class="small button">3</button>
    <button class="small button">+</button>
  </div>
  <div class="row">
    <button class="large button">0</button>
    <button class="small button">=</button>
  </div>
</div>

jsFiddle

Thank you, that is a very clear explanation. Now, do you know why the margins are still not alligned? look at the 3 middle rows, the sizes of the X, - and + buttons dont match with the rest. — Dasphillipbrau, Mar 05 '20 at 04:16
@Dasphillipbrau That's really a secondary topic dealing with fonts, white space, etc. I would ask it as a separate question. — Andy Hoffman, Mar 05 '20 at 04:25
@Dasphillipbrau The problem is that you're using an X (the letter) and not the Unicode "multiplication sign". You can add that with `×`. You may wish to use icon instead of characters to represent your mathematical operators, though. — mattbasta, Mar 05 '20 at 05:11

Flexbox calculator not aligning itself properly

1 Answers1