Adjacent flexbox divs with wrapped content aligning on baseline instead of grid

Question

I'm trying to make a sudoku solver, using reactjs as an exercise to learn reactjs. Each square on the grid, may contain either a single number('filled'), or up to 9 'notes' indicating what numbers may fit there.

The problem is that when a filled square is beside a notes square, the notes squares seem to shift downwards such that the first line of the notes' baseline is aligned with that of a digit in the filled square. I want the squares to stay put in relation to one another, ignoring their content.

I'm using flexbox to lay things out.

I don't understand why it's behaving this way. I've tried tinkering with the css to get it to work differently, but nothing I've tried has had an impact.

Here's how the html is laid out:

<div class='board'>
  <div class='board-row'>
    <div class='square'>
      <div class='number filled'>9</div>
    </div>
    <div class='square'>
      <div class='note'>1</div>
      <div class='note'>2</div>
      <div class='note'>3</div>
      <div class='note'>4</div>
      <div class='note'>5</div>
      <div class='note'>6</div>
      <div class='note'>7</div>
      <div class='note'>8</div>
    </div>
    <div class='square'>
      <div class='note'>1</div>
      ...
    </div>
    ...
  </div>
  ...
</div>

and relevant css

body {
  font-family: "helvetica";
  font-size: 16px;
}

.board {
  display: flex;
  flex-direction: column;
  font-family: monospace;
}

.board-row {
  flex-direction: row;
}

.square {
  height: 3em;
  width: 3em;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  display: inline-flex;
}

.square .filled {
  font-size: 2rem;
  background-color: #CC0;
}

.square .note {
  padding-left: 3px;
  padding-right: 3px;
}

Here's a screenshot of what it looks like (with the notes bordered in red - they contain ' ')

link because I can't get it to embed: https://i.stack.imgur.com/ohVyw.jpg

I want the black-bordered squares to be aligned in a grid.

score 1 · Accepted Answer · answered Aug 09 '19 at 16:20

1

I believe you need your .board-row also set to display: flex, looks like you've only set the flex-direction (which is unnecessary, as row is the default flex-direction if you wanted to save a line of code).

answered Aug 09 '19 at 16:20

majman

1,993
14
23

Thanks! this fixed it even better than my columns solution. I thought I read somewhere that doing `display: flex;` on a parent element automatically made all of it's children also flexbox elements. Is that not the case? – hoylemd Aug 09 '19 at 16:41
@hoylemd - no, the `display` property is not inherited by default (however, you can set `display: inherit` in child classes/selectors if you want). this question: https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited has some good links/answers for info around what is and isn't an inherited property. I usually will check the specific properties [MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Specifications) – majman Aug 11 '19 at 16:53

score 0 · Answer 2 · answered Aug 09 '19 at 16:18

0

All you’re missing is vertical-align: top on the .square.

This works because display: inline-flex; works pretty much like display: inline-block.

answered Aug 09 '19 at 16:18

Simone

20,302
14
79
103

score 0 · Answer 3 · answered Aug 09 '19 at 16:28

I found a solution: use columns instead of rows.

I changed .board-row to be .board-column and removed the flex-direction: row from .board-row. I also reorganized the notes to be 3 rows of 3 instead of 9 wrapping elements.

I don't think that's the best solution though, just posting it here for posterity.

Adjacent flexbox divs with wrapped content aligning on baseline instead of grid

3 Answers3