創建展開等寬的彈性盒

我需要圖像在頁面大小調整時縮小，因此img { width: 100% }這允許頁面調整大小，並且圖像會相應地縮放。

我不確定爲什麼此佈局會導致三個博客條目爲不同寬度，尤其是當所涉及的圖像完全相同時。

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

給出下面的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>

來源

2017-03-12 Jim

我沒有看到你的bootply任何問題，'div's與同'width'即使調整 – dippas

我我不明白你的意思，在這裏工作很好 –

你有柔性容器上指定flex: 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項目：

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

revised demo

來源

2017-03-12 13:58:36

創建展開等寬的彈性盒

回答

相關問題