伸縮する等しい幅のフレックスボックスを作成する

Question

以下のフレックスCSSレイアウトが与えられている。

ページがリサイズされるにつれて画像のサイズを小さくする必要があります。したがって、img { width: 100% }は、ページのサイズを変更できるようになり、画像はそれに応じて拡大縮小されます。

このレイアウトでは、特に問題の画像がすべて同じであるため、の幅が異なるという3つのブログエントリが表示されるのは不明です。

ここにはworking bootplyがあります。

div.container div.blog, 
div.container-fluid div.blog { 
    display: flex; 
    flex: 1; 
    flex-flow: row nowrap; 
} 

div.container div.blog div, 
div.container-fluid div.blog div { 
    margin: 0 12.5px; 
} 

div.container div.blog div:first-of-type, 
div.container-fluid div.blog div:first-of-type { 
    margin-left: 0px; 
} 

div.container div.blog div:last-of-type, 
div.container-fluid div.blog div:last-of-type { 
    margin-right: 0px; 
} 

div.container div.blog div img, 
div.container-fluid div.blog div img { 
    width: 100%; 
} 

div.container div.blog h1, 
div.container-fluid div.blog h1 { 
    color: #8f825a; 
    font-size: 2.7rem; 
    text-transform: none; 
} 

div.container div.blog h2, 
div.container-fluid div.blog h2 { 
    color: #8f825a; 
    font-size: 1.8rem; 
} 

div.container div.blog+section, 
div.container-fluid div.blog+section { 
    margin-top: 5rem; 
} 

は、Flexコンテナ上flex: 1を指定して、次のHTML

<div class="container"> 
    <h1>Blog</h1> 
    <div class="blog"> 
      <div> 
      <img src="image1"> 
       <h1>Lorem ipsum dolor sit amet</h1> 
       <p>&#xA;  Lorem ipsum dolor sit amet, consectetur adipisicing elit Libero tenetur,&#xA;  earum repudiandae ut fuga qui modi maxime dolorem quo! Id maiores neque rem&#xA;  dignissimos amet velit perspiciatis labore veritatis eligendi.&#xA; </p> 
       <h2>Fred Jones</h2> 
       <h3>2014-01-01</h3> 
      </div> 
      <div> 
      <img src="image2"> 
       <h1>Eum debitis</h1> 
       <p>&#xA;  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum debitis culpa modi, illo ullam necessitatibus&#xA;  beatae. Eveniet sequi quos explicabo magni ipsum nostrum asperiores dolore aliquam libero&#xA;  accusantium ullam omnis, sed fugiat dolorem est, quae quaerat deserunt labore delectus. Quis, earum fugit,&#xA;  necessitatibus recusandae perferendis, ducimus dignissimos amet autem ea, consequatur neque!&#xA; </p> 
       <h2>Joe Soap</h2> 
       <h3>2014-01-01</h3> 
      </div> 
      <div> 
      <img src="image3"> 
       <h1>Aliquid nesciunt delectus</h1> 
       <p>&#xA;  Ut, sapiente, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit.&#xA;  Aliquid nesciunt delectus, quae deleniti voluptas neque consequatur,provident perspiciatis laborum culpa&#xA;  corporis fugit earum cupiditate deserunt vero atque harum iste illum officia maxime. Et officia distinctio&#xA;  corrupti repellat! Repellendus, distinctio voluptates, earum quidem dolore facere.&#xA; </p> 
       <h2>Ishmael</h2> 
       <h3>2014-01-01</h3> 
      </div> 
    </div> 
</div> 

Answer 1

を考えます。そこには適用されません。

コンテナスペースを均等に分配したい場合は、flex: 1をアイテムに適用する必要があります。

div.container div.blog, 
div.container-fluid div.blog { 
    display: flex; 
    /* flex: 1; <----------- NOT DOING ANYTHING */ 
    flex-flow: row nowrap; 
} 

上記参照コードブロック（div.container）の親要素は、Flexコンテナではないので、flexは何の効果も有していません。

シフトあなたのフレックスアイテムにルール：私はあなたのbootplyですべての問題が表示されない

div.container div.blog div, div.container-fluid div.blog div { 
    margin: 0 12.5px; 
    flex: 1; /* NEW */ 
} 

revised demo