不确定该布局使用什么显示

Question

我正在尝试创建一个我想弯曲的布局，但重要的是它在每个div /图像之间保持了一致的间距。我开始使用引导程序，但我认为可能需要更多自定义。我意识到您不能将display：table与display：flex一起使用。

专家css ppl您有什么建议？

Answer 1

使用CSS网格

最好的方法是使用grid-column和grid-row

使用CSS网格

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-rows: minmax(50px, auto);
  text-align: center;
  color: #666;
}

.grid>div {
  background: #eee;
  border: 1px solid #666;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.three {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.four {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.five {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.six {
  grid-column: 1 / 2;
  grid-row: 3 / 5;
}

.seven {
  grid-column: 2 / 3;
  grid-row: 3 / 5;
}

.eight {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">Seven</div>
  <div class="eight">Eight</div>
</div>

---

使用Flexbox

或者，要支持IE11，可以使用flexbox，但要增加一些标记。

在走这条路之前，请务必先阅读can i use上的“已知问题”部分，以获取一些陷阱。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  color: #666;
}

.cell {
  display: flex;
  flex-grow: 1;
  text-align: center;
  align-self: center;
  align-self: stretch;
}

.cellinner {
  margin: 4px;
  min-height: 50px;
  flex: 1 1 100%;
  background: #eee;
  border: 1px solid #666;
}

.cell1,
.cell2 {
  flex-basis: 25%;
}

.cell3 {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  flex-direction: row;
}

.cell3-1 {
  flex: 1 1 100%;
}

.cell4,
.cell5 {
  flex-basis: 25%;
}

.cell6 {
  flex-basis: 50%;
}

<div class="wrapper">
  <div class="cell cell1">
    <div class="cellinner">1</div>
  </div>
  <div class="cell cell2">
    <div class="cellinner">2</div>
  </div>
  <div class="cell cell3">
    <div class="cell cell3-1">
      <div class="cellinner">3.1</div>
    </div>
    <div class="cell cell3-2">
      <div class="cellinner">3.2</div>
    </div>
    <div class="cell cell3-3">
      <div class="cellinner">3.3</div>
    </div>
  </div>
  <div class="cell cell4">
    <div class="cellinner">4</div>
  </div>
  <div class="cell cell5">
    <div class="cellinner">5</div>
  </div>
  <div class="cell cell6">
    <div class="cellinner">6</div>
  </div>
</div>