フレックスボックスを使用したCSSの驚異的な項目

Question

CSSで、各行に1つの項目しかないが、他の行の項目からオフセットされた、ずらしたレイアウトを作成しようとしています。

これまで2つの作業例を作成しましたが、これを達成するためのより良い方法があるかどうかは疑問です。ここで

は、私は、スペーサのdivを使って作られた例を示します http://cdpn.io/e/EWrMgL

HTML：私は余白を使用してクリーンなバージョンで別の試みを行った

.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; 
} 

---

：

<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

それぞれ をラップする代わりに行のアイテム： 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

：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

コードの2番目のバージョンは問題ありません。十分に簡単です。特定のマージンを使用する代わりに私が示唆しているのは、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%; 
    } 
} 

これは正しい方向を指し示すことを望みます。あなたはflex-direction: columnに変更しwrapを削除すると、2