使用flexbox在CSS中混淆項目

Question

我試圖在CSS中創建交錯佈局，其中每行只有一個項目，但它將與其他行上的項目偏移。

到目前爲止，我已經做了兩個工作示例，但我想知道是否有更好的方法來實現此目的。

下面是我用間隔的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：第二將表現爲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%; 
    } 
} 

希望這將指向你在正確的方向。