html - 增加边距时如何防止列在彼此下方移动？

Question

我需要一个基本的 3x3 引导网格，列和行之间有空格。但我就是做不到。每当我使用边距时，第 3 列会移动到第 1 列下方，并且它们不会以 3x3 的方式排列。为什么会发生这种情况？

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.col-md-4 {
  background-color: #1A1919;
  margin: 5px;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">1x1</div>
    <div class="col-md-4">1x2</div>
    <div class="col-md-4">1x3</div>
  </div>
  <div class="row">
    <div class="col-md-4">2x1</div>
    <div class="col-md-4">2x2</div>
    <div class="col-md-4">2x3</div>
  </div>
  <div class="row">
    <div class="col-md-4">3x1</div>
    <div class="col-md-4">3x2</div>
    <div class="col-md-4">3x3</div>
  </div>
</div>

Answer 1

我认为问题出在您的 CSS 中。属性 flex-direction 设置不正确。

检查这个 fiddle 并告诉我它是否回答了您的问题。 https://jsfiddle.net/cqevhh2u/ flex-direction: row;