CSS和Flexbox布局问题

Question

在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> 

我以为正方形应该在2x3矩阵中。 相反，它们都垂直堆叠。 我想念什么？ 以为显示：flex将沿着水平的主轴对齐项目。

有人可以调查一下，并告诉我我做错了什么吗？ 目标是可视化2x3矩阵中的正方形。

-感谢Chakri

Answer 1

您需要修正错字并在.square添加box-sizing: border-box以使边框不会超出定义的宽度。

 .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

在HTML的第24行（在Codepen中），您有错字。 只需将<div class="=board">更改为<div class="board">

Answer 3

 <div class="=board"> 

替换为

 <div class="board"> 

应该做到的。

Answer 4

试试这个代码

 .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>