flex items dehnen auf breiteren Bildschirmen

Ich habe gerade meine erste Webseite mit flexbox fertiggestellt. Es sieht gut aus auf meiner Bildschirmauflösung (1326x768), aber wenn ich es auf einem größeren Bildschirm (1894x787) teste, sieht der Inhalt verrückt gestreckt. Dies sind die Screenshots:flex items dehnen auf breiteren Bildschirmen

Bei 1326x768

Bei höheren Bildschirmauflösung

Codepen

Ich hatte flex: 1 1 60% auf einige Elemente verwendet (die% variiert natürlich), aber machen flex-grow: 0 nicht wirklich etwas tun.

Ich habe nur feste Parameter für die Container von Bildern (feste Höhen) festgelegt. Ich habe keine festen Breiten für einen Container festgelegt.

Fehle ich hier etwas mit Flexboxen?

Ich denke, Media-Abfragen können eine Möglichkeit sein, dieses Problem zu lösen, aber gibt es eine andere Lösung, eine robustere Möglichkeit, mit Flex zu entwickeln?

Wie kann ich die Seite so aussehen lassen, wie sie in allen Bildschirmgrößen nicht gestreckt oder übermäßig komprimiert aussehen soll?

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.margin-end { 
 
    margin-bottom: 40px; 
 
} 
 
.margin-start { 
 
    margin-top: 10px; 
 
} 
 
header { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    color: #6e6e6e; 
 
    font-family: AvenirLTStd-Roman; 
 
    font-weight: bolder; 
 
    font-size: 1rem; 
 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11); 
 
    /*box-shadow: 0px 10px 5px -9px rgba(0,0,0,0.75);*/ 
 
    /*border-bottom: solid 1px #ececec;*/ 
 
} 
 
.banner-heading { 
 
    margin-left: 350px; 
 
    font-weight: bolder; 
 
    font-size: 1.875rem; 
 
} 
 
.secondary-heading { 
 
    /* \t border: solid; 
 
*/ 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin-right: 60px; 
 
    font-size: 0.8rem; 
 
    justify-content: center; 
 
    position: relative; 
 
    /* \t margin: auto; 
 
*/ 
 
} 
 
.secondary-heading-1 { 
 
    padding-right: 60px; 
 
    /* vertical centering */ 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    font-weight: lighter; 
 
} 
 
.secondary-heading-2 { 
 
    /* vertical centering */ 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    color: #6e6e6e; 
 
    font-weight: lighter; 
 
} 
 
.secondary-heading-1 a, 
 
.secondary-heading-2 a { 
 
    color: #6e6e6e; 
 
} 
 
.main-content { 
 
    display: flex; 
 
    flex-direction: row; 
 
    /* \t border:solid; 
 
*/ 
 
    margin-left: 350px; 
 
    margin-right: 60px; 
 
} 
 
.main-content-left { 
 
    /* \t border:dashed;*/ 
 
    /*width: 200px; 
 
\t height: 200px;*/ 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 1 60%; 
 
    padding-right: 20px; 
 
} 
 
.main-content-left-heading { 
 
    width: 100%; 
 
    border-bottom: solid 1px #959595; 
 
    padding-bottom: 20px; 
 
    padding-top: 20px; 
 
} 
 
.main-content-right { 
 
    /*border: dashed;*/ 
 
    /*width: 200px; 
 
\t height: 200px;*/ 
 
    margin-left: auto; 
 
    flex: 0 1 40%; 
 
} 
 
.main-content-left-heading p { 
 
    /*margin:0; 
 
\t padding:0;*/ 
 
    line-height: 100%; 
 
} 
 
.main-content-left-heading-1 { 
 
    font-family: AvenirLTStd-Roman; 
 
    font-style: italic; 
 
    color: #6e6e6e; 
 
} 
 
.main-content-left-heading-2 { 
 
    padding-top: 5px; 
 
    font-family: AvenirLTStd-Roman; 
 
    color: #6e6e6e; 
 
    font-weight: bolder; 
 
    font-size: 1.5rem 
 
} 
 
.main-content-left-image-1 { 
 
    padding: 0; 
 
    margin: 0; 
 
    /* \t border: solid; 
 
*/ 
 
    width: 100%; 
 
    height: 360px; 
 
    background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/010fa5bb-20b9-4603-8e31-3a5e053d936f.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 
.main-content-left-image-2 { 
 
    padding: 0; 
 
    margin: 0; 
 
    /* \t border: solid; 
 
*/ 
 
    width: 100%; 
 
    height: 360px; 
 
    background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/a49ee715-cd02-4b16-9164-941585e2fbbe.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
.main-content-left-image-3 { 
 
    padding: 0; 
 
    margin: 0; 
 
    /* \t border: solid; 
 
*/ 
 
    width: 100%; 
 
    height: 360px; 
 
    background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
.main-content-left-text { 
 
    /* \t border:solid; 
 
*/ 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin-top: solid; 
 
    padding-top: 20px; 
 
    /* \t padding-bottom: 20px; 
 
*/ 
 
} 
 
.main-content-left-text-group-left { 
 
    padding: 10px 60px 10px 0px; 
 
} 
 
.main-content-left-text-group-left-1 { 
 
    padding-bottom: 10px; 
 
    font-family: SourceSansBold; 
 
    font-size: 0.875rem; 
 
    font-weight: 900; 
 
} 
 
.main-content-left-text-group-left-2 { 
 
    font-family: SourceSansBold; 
 
    font-size: 0.875rem; 
 
    color: #888585; 
 
    font-weight: 900; 
 
} 
 
.main-content-left-text-group-right { 
 
    padding: 10px; 
 
    border-left: solid 1px #959595; 
 
} 
 
.main-content-left-text-group-right-1 { 
 
    font-family: Avenir-Next-LT-Pro-Demi; 
 
    font-size: 1.45rem; 
 
    padding-bottom: 20px; 
 
    color: #444444; 
 
    font-weight: bolder; 
 
} 
 
.main-content-left-text-group-right-2 { 
 
    font-size: 1rem; 
 
    font-family: SourceSansPro-Regular; 
 
} 
 
.main-content-right { 
 
    border-left: solid 1px #959595; 
 
    margin-top: 20px; 
 
    padding-right: 65px; 
 
    padding-left: 20px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.main-content-right-heading { 
 
    border-bottom: solid 2px #363636; 
 
    height: 65px; 
 
    display: flex; 
 
} 
 
.main-content-right-heading p { 
 
    font-size: 0.9rem; 
 
    margin-top: auto; 
 
    font-family: SourceSansBolder; 
 
    font-weight: bolder 
 
} 
 
.main-content-right-content { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-bottom: solid 1px #959595; 
 
} 
 
.main-content-right-image-1 { 
 
    width: 100%; 
 
    height: 180px; 
 
    background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
.main-content-right-image-2 { 
 
    width: 100%; 
 
    height: 180px; 
 
    background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
.main-content-right-image-3 { 
 
    width: 100%; 
 
    height: 180px; 
 
    background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
.main-content-right-group { 
 
    /*border:solid;*/ 
 
    /* \t padding-bottom: 10px; 
 
*/ 
 
} 
 
.main-content-right-group-1 { 
 
    padding-top: 10px; 
 
    color: #b8b6b6; 
 
    font-family: SourceSansBold; 
 
    font-size: 0.875rem 
 
} 
 
.main-content-right-group-2 { 
 
    padding-top: 10px; 
 
    font-family: Avenir-Next-LT-Pro-Demi; 
 
    font-weight: bolder; 
 
    color: #444444; 
 
    font-size: 1.1rem; 
 
}

<header> 
 
    <h1 class="banner-heading">Entrepreneurs Weekly</h1> 
 
    <div class="secondary-heading"> 
 
    <h3 class="secondary-heading-1"><a href="">BECOME A CURATOR</a></h3> 
 
    <h3 class="secondary-heading-2"><a href="">ABOUT</a></h3> 
 
    </div> 
 
</header> 
 
<div class="main-content"> 
 
    <div class="main-content-left"> 
 
    <div class="main-content-left-heading"> 
 
     <p class="main-content-left-heading-1">Week 008,</p> 
 
     <p class="main-content-left-heading-2">How To create the next Steve Jobs</p> 
 
    </div> 
 
    <div class="main-content-left-heading"> 
 
     <div class="main-content-left-image-1"> 
 
     <!-- \t \t \t \t \t \t \t <img src="assets/WeeklyContent1.png" /> 
 
--> 
 
     </div> 
 
     <div class="main-content-left-text"> 
 
     <div class="main-content-left-text-group-left"> 
 
      <p class="main-content-left-text-group-left-1">POLITICS</p> 
 
      <p class="main-content-left-text-group-left-2">NYTIMES.COM</p> 
 
     </div> 
 
     <div class="main-content-left-text-group-right"> 
 
      <p class="main-content-left-text-group-right-1">New York magazine turns a history of shopping recommendations into a new online revenue stream</p> 
 
      <p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="main-content-left-heading"> 
 
     <div class="main-content-left-image-2"> 
 
     <!-- \t \t \t \t \t \t \t <img src="assets/WeeklyContent1.png" /> 
 
--> 
 
     </div> 
 
     <div class="main-content-left-text"> 
 
     <div class="main-content-left-text-group-left"> 
 
      <p class="main-content-left-text-group-left-1">POLITICS</p> 
 
      <p class="main-content-left-text-group-left-2">NYTIMES.COM</p> 
 
     </div> 
 
     <div class="main-content-left-text-group-right"> 
 
      <p class="main-content-left-text-group-right-1">The Texas Tribune updates its premium political coverage for an email</p> 
 
      <p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="main-content-left-heading margin-end"> 
 
     <div class="main-content-left-image-3"> 
 
     <!-- \t \t \t \t \t \t \t <img src="assets/WeeklyContent1.png" /> 
 
--> 
 
     </div> 
 
     <div class="main-content-left-text"> 
 
     <div class="main-content-left-text-group-left"> 
 
      <p class="main-content-left-text-group-left-1">POLITICS</p> 
 
      <p class="main-content-left-text-group-left-2">NYTIMES.COM</p> 
 
     </div> 
 
     <div class="main-content-left-text-group-right"> 
 
      <p class="main-content-left-text-group-right-1">The Incline, Billy Penn’s new sister site, launches in Pittsburgh</p> 
 
      <p class="main-content-left-text-group-right-2">Like Billy Penn in Philadelphia, the Pittsburgh site will focus on attracting a younger audience through events and aggregation in addition to original reporting.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="main-content-right"> 
 
    <div class="main-content-right-heading"> 
 
     <p>THE LATEST FROM ENTREPRENEUR'S WEEKLY</p> 
 
    </div> 
 

 
    <div class="main-content-right-content margin-start"> 
 
     <div class="main-content-right-image-1"> 
 
     <!-- image goes as background --> 
 
     </div> 
 
     <div class="main-content-right-group"> 
 
     <p class="main-content-right-group-1">WEEK 01</p> 
 
     <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p> 
 
     </div> 
 

 
    </div> 
 
    <div class="main-content-right-content"> 
 
     <div class="main-content-right-image-2"> 
 
     <!-- image goes as background --> 
 
     </div> 
 
     <div class="main-content-right-group"> 
 
     <p class="main-content-right-group-1">WEEK 01</p> 
 
     <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p> 
 
     </div> 
 
    </div> 
 
    <div class="main-content-right-content"> 
 
     <div class="main-content-right-image-3"> 
 
     <!-- image goes as background --> 
 
     </div> 
 
     <div class="main-content-right-group"> 
 
     <p class="main-content-right-group-1">WEEK 01</p> 
 
     <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-11-04 snow

Sie scheinen Prozentsätze werden mit ihrer ursprünglichen Größe (60% in Ihrem Beispiel) einzustellen. Ist das nicht erwartetes Verhalten? Werden die Elemente nicht wachsen, wenn Ihr Bildschirm wächst, unabhängig vom Wert von flex-grow? –

Das ist wahr. die anfängliche Idee war die Verringerung ihrer Breiten, wenn die Bildschirmbreiten abnehmen (Sie wissen, für das Mobile). Aber leider ist auch das Gegenteil der Fall. – snow

Wenn Sie den Inhalt nicht strecken möchten, können Sie die maximale Breite in Ihren Behälter legen. – GvM

Dies ist die Ursache des Problems:

.main-content-left-image-1 { 
    padding: 0; 
    margin: 0; 
    width: 100%; <---- problem 
    height: 360px; <---- problem 
    background-image: url("https://gallery.mailchimp.com/f6..."); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
} 
.main-content-left-image-2 { 
    padding: 0; 
    margin: 0; 
    width: 100%; <---- problem 
    height: 360px; <---- problem 
    background-image: url("https://gallery.mailchimp.com/f6..."); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
}

Wenn Sie ein Bild sagen width: 100% und height: 360px zu sein, prüfen, wie die aus spielt.

Die Breite ist immer die volle Länge des Containers. Ob der Bildschirm breit oder schmal ist, das Bild passt dazu.

Aber Sie haben eine feste Höhe von 360px festgelegt. Da gibt es keine Flexibilität.

Als Ergebnis ist das Bild vertikal horizontal und unflexibel vertikal, was zu einem Verlust von Seitenverhältnis/Verzerrung führt.

Es gibt mehrere mögliche Lösungen für dieses Problem:

Quelle

2016-11-04 19:04:50

hey @Michael_B, die akzeptierte Antwort in einem der Links, die Sie erwähnt haben 'Legen Sie keine Breite, Höhe oder Ränder .'. Ich glaube nicht, dass irgendeine vernünftige Person versuchen würde, Breite und Höhe für das Hintergrundbild festzulegen. Wenn Sie das mit einem Hintergrundbild in den Container tun, wird das Bild überhaupt nicht angezeigt. – snow

In den von mir bereitgestellten Links gab es insgesamt 17 Antworten. Ich habe sie überprüft, bevor ich sie in meiner Antwort gepostet habe. Es gibt verschiedene gute Lösungen. Die angenommene Antwort ist nur eine - diejenige, die zufällig für die Person funktioniert hat, die die Frage gestellt hat. –

fand die beste Lösung unter den am wenigsten gewählten Antworten (es hatte nur Links zur Verfügung gestellt). Danke – snow

flex items dehnen auf breiteren Bildschirmen

Antwort

Verwandte Themen