CSS and Flexbox layout issue - html

Question

Created a codepen at http://codepen.io/cbireddy/pen/vmYxbz
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
}
<div class="=board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
I was thinking the squares should be in a 2x3 matrix. Instead they are all stacked vertically. What am I missing? Thought that display: flex will align the items along main axis, which is horizontal.
Can someone please look into this and tell me what am I doing wrong? Goal is to visualize the squares in a 2x3 matrix.
-Thanks
Chakri

Answer 1

You need to fix the typo and add box-sizing: border-box to .square so that the borders don't push beyond the defined width.
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
box-sizing: border-box;
}
<div class="board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>

Answer 2

In row 24 of your HTML (in Codepen), you have typo. Just change <div class="=board">to <div class="board">

Answer 3

<div class="=board">
Replace this with
<div class="board">
Should do the trick.

Answer 4

Try This code
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
}
<div class="board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>