html - 使用 flexbox 在 CSS 中错开元素

Question

我正在尝试在 CSS 中创建交错布局，其中每一行只有一个元素，但它会与其他行上的元素发生偏移。

到目前为止，我已经做了两个工作示例，但我想知道是否有更好的方法来实现这一目标。

这是我使用 spacer divs 制作的示例: http://cdpn.io/e/EWrMgL

HTML:

<div class="container">
    <div class="row">
        <div class="spacer">(spacer)</div>
        <div class="content col-2">content 2</div>
        <div class="spacer">(spacer)</div>
    </div>
    <div class="row">
        <div class="content col-1">content 1</div>
        <div class="spacer">(spacer)</div>
        <div class="spacer">(spacer)</div>
    </div>
    <div class="row">
        <div class="spacer">(spacer)</div>
        <div class="spacer">(spacer)</div>
        <div class="content col-3">content 3</div>
    </div>
    <div class="row">
        <div class="spacer">(spacer)</div>
        <div class="spacer">(spacer)</div>
        <div class="content col-3">content 3</div>
    </div>
</div>

CSS:

.container, .spacer, .content, .row {
    display: flex;
}

.container {
    flex-flow: row wrap;
    font-family: sans-serif;
}

.row {
    width: 100%
}

.spacer {
    color: #2c3e50;
    flex: 1 1 0%;
}

.content {
    color: #ecf0f1;
    flex : 3 1 0%;
    flex-basis: 60%
}

.content, .spacer {
    justify-content: center;
    align-items: center;
    min-height: 5em;
    margin: 0.5em;
}

.col-1 {
    background-color: #96858F;
}

.col-2 {
     background-color:#9099A2;
}

.col-3 {
    background-color: #6d7993;
}

---

我再次尝试使用边距而不是换行来创建一个更清晰的版本一行中的每一项:http://cdpn.io/e/xqMBmB

HTML:

<div class="container">
        <div class="content col-2">content 2</div>
        <div class="content col-1">content 1</div>
        <div class="content col-3">content 3</div>
        <div class="content col-3">content 3</div>
</div>

CSS:

.container, .content{
    display: flex;
}

.container {
    flex-flow: row wrap;
    font-family: sans-serif;
}

.content {
    color: #ecf0f1;
    flex: 0 1 70%;

    justify-content: center;
    align-items: center;
    min-height: 5em;
    margin-bottom: 0.5em;
}

.col-1 {
    background-color: #96858F;
}

.col-2 {
    background-color:#9099A2;
    margin-left: 7.5%;
}

.col-3 {
    background-color: #6d7993;
    margin-left: 15%;
}

---

有没有比将每一行包含在一个 div 中或更改页边距更简洁的方法来做到这一点？我想添加 @media 规则，使行在特定屏幕尺寸下的宽度为 100%。

Answer 1

如果您更改为 flex-direction: column 并删除 wrap，则 2:nd 将与 1:st 行为相同

我还添加了一个媒体查询，以缩小左边距。

有了这个标记，更改顺序和布局也更容易，而且很可能是最好的方法。

.container, .content{
  display: flex;
}
.container {
  flex-direction: column;
  font-family: sans-serif;
}
.content {
  color: #ecf0f1;
  justify-content: center;
  align-items: center;
  min-height: 5em;
  margin-bottom: 0.5em;
}
.col-1 {
  background-color: #96858F;
}
.col-2 {
  background-color:#9099A2;
  margin-left: 7.5%;
}
.col-3 {
  background-color: #6d7993;
  margin-left: 15%;
}

@media screen and (max-width: 500px) {
  .content {
    margin-left: 0;
  }
}

<div class="container">
    <div class="content col-2">content 2</div>
    <div class="content col-1">content 1</div>
    <div class="content col-3">content 3</div>
    <div class="content col-3">content 3</div>
</div>

---

你也可以调整它们的大小，像这样

.container, .content{
  display: flex;
}
.container {
  flex-direction: column;
  font-family: sans-serif;
}
.content {
  width: 70%;
  color: #ecf0f1;
  justify-content: center;
  align-items: center;
  min-height: 5em;
  margin-bottom: 0.5em;
}
.col-1 {
  background-color: #96858F;
}
.col-2 {
  background-color:#9099A2;
  margin-left: 7.5%;
}
.col-3 {
  background-color: #6d7993;
  margin-left: 15%;
}

@media screen and (max-width: 500px) {
  .content {
    margin-left: 0;
    width: 100%;
  }
}

<div class="container">
    <div class="content col-2">content 2</div>
    <div class="content col-1">content 1</div>
    <div class="content col-3">content 3</div>
    <div class="content col-3">content 3</div>
</div>