Question

我正在尝试在CSS中创建交错布局，其中每行只有一个项目，但它将偏离其他行上的项目。

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

这是我使用spacer div制作的一个例子： 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>

Answer 2

您的第二个版本的代码很好，很简单。我建议使用auto页边距而不是使用特定页边距，将项目的大小更改为100%，然后指定max-width，以便在较小的设备上将其填满宽度和更大的屏幕，他们不会。以下是CSS的示例：

.container, .content{
  display: flex;
}

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

.content {
  color: #ecf0f1;
  flex: 0 1 100%; /* CHANGE */
  max-width: 800px; /* CHANGE */
  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: auto; /* CHANGE */
  margin-right: auto; /* CHANGE */
}

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

也许这就是你追求的结果？如果不是这样的话应该没问题。如您所建议的那样使用媒体查询也可以使用，将弹性大小从70%更改为100%低于特定宽度。您可以通过在CSS的末尾添加类似下面的内容来实现：

@media screen and (max-width: 600px) {
  .content {
    flex: 0 1 100%;
  }
}

希望这会指出你正确的方向。

使用flexbox在CSS中交错项目

2 个答案: