erstellen Flex-Boxen von gleicher Breite, die sich dehnen

Angesichts der unten Flex-CSS-Layout.erstellen Flex-Boxen von gleicher Breite, die sich dehnen

Ich brauche die Bilder kleiner zu skalieren, da die Seite in der Größe geändert wird, daher img { width: 100% } Dies ermöglicht die Größe der Seite zu ändern, und die Bilder skalieren entsprechend.

Ich bin mir nicht sicher, warum dieses Layout in den drei Blog-Einträgen von unterschiedlicher Breite resultiert, zumal die fraglichen Bilder alle gleich sind.

Hier ist ein 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; 
}

den folgenden HTML Bei

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

Quelle

2017-03-12 Jim

Ich habe kein Problem in Ihrem bootply sehen, die 'div's sind mit gleichen' width' selbst wenn Ändern der Größe – dippas

I Ich verstehe nicht, was du meinst, funktioniert hier gut –

Sie flex: 1 auf den Flex-Container festgelegt haben. Es gilt nicht dort.

Sie müssen flex: 1 auf die Elemente anwenden, wenn Sie möchten, dass Container gleichmäßig verteilt werden.

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

Elternelement des Codeblocks oben Referenz (div.container) kein flex Behälter, so wird flex keine Wirkung.

Verschiebung der Regel auf Ihre flex Artikel:

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

revised demo

Quelle

2017-03-12 13:58:36

erstellen Flex-Boxen von gleicher Breite, die sich dehnen

Antwort

Verwandte Themen