フレックスコンテナ内の単一アイテムの全幅

Question

私はレスポンシブデザインに取り組んでいます。私は本当にHTMLマークアップを変更したくないのですが、仕事をしています。

私は3つの要素（カテゴリ、画像サムネイル、およびテキストを含むdiv）を持つコンテナを持っています。

HTML

<article class="featured"> 
    <div class="category"> 
    <a href="/#/#/">Category name</a> 
    </div> 
    <a href="/my-img/" class="thumb-wrapper"> 
    <div class="thumb" style="background-image: url(http://my-image-path);"></div> 
    </a> 
    <div class="text"> 
    <h2><a href="/#/">Lorem ipsum</a></h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vehicula erat, eget volutpat erat. In imperdiet ligula id mauris convallis aliquet quis congue dui. Integer vulputate erat augue, ac aliquam velit iaculis at. </p> 
    </div> 
</article> 

だからそこarticleの3つのつの子要素です：div.categoryは、aとdiv.text

私はdiv.categoryがarticle全体で全幅/ max-width:100%座っていると私は、その後にaとdiv.textをしたいようにしたいですフレックスを使って隣り合わせに座る。私はすでにdiv.categoryが存在するときには、この作業を他の場所で行っています。

私はHTMLの構造を変更したくない、と述べたと、これは私が他の場所で使用したものであると私はflexの利用をしたいと思い、ここで少しモックアップ

です。

私の問題は、親（article）にdisplay:flex;が適用されている場合、div.category全幅になっています。基本的に私は、カテゴリにwidth:100%を適用しようとした、そしてそれが縮小することができないように、その後もflex-shrink:0;を適用したが、その後第二の二要素ドンいる

JS Fiddle

だけ div.categoryに flexの効果を上書きしようとしています次の行に折り返します。そして、 flex-wrapを使ってそれらを折り返しても、1つの行に座っているわけではありません。

Answer 1

あなたは.categoryに.thumb-wrapperと.text 、およびflex: 0 0 100%にflex: 0 0 50%を使用することができ、かつarticle

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
article { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.category, .thumb-wrapper, .text { 
 
    border: 1px solid black; 
 
    flex: 0 0 50%; 
 
    padding: 10px; 
 
} 
 
.category { 
 
    flex: 0 0 100%; 
 
} 
 
.thumb-wrapper, .thumb { 
 
    display: flex; 
 
    flex: 1; 
 
    background-position: center; 
 
}

<article class="featured"> 
 
    <div class="category"> 
 
    <a href="/#/#/">Category name</a> 
 
    </div> 
 
    <a href="/my-img/" class="thumb-wrapper"> 
 
    <div class="thumb" style="background-image: url('http://placehold.it/350x150');"></div> 
 
    </a> 
 
    <div class="text"> 
 
    <h2><a href="/#/">Lorem ipsum</a></h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vehicula erat, eget volutpat erat. In imperdiet ligula id mauris convallis aliquet quis congue dui. Integer vulputate erat augue, ac aliquam velit iaculis at.</p> 
 
    </div> 
 
</article>

に flex-wrap: wrapを設定することを忘れないでください