伸展在更宽屏幕上的弹性项目

问题描述:

我刚刚使用flexbox完成了第一个网页的开发。它在我的屏幕分辨率(1326x768)上看起来很棒,但是当我在更大的屏幕(1894x787)上测试它时,内容看起来很疯狂。下面是截图:伸展在更宽屏幕上的弹性项目

在1326x768

At 1326x768

在更高的屏幕分辨率

at higher resolution

Codepen

我在某些元素上使用了flex: 1 1 60%(当然这个百分比有所不同),但是使flex-grow: 0没有任何作用。

我只为图像容器(固定高度)设置了固定参数。我没有为任何容器设置固定宽度。

我在这里错过了弹性盒子的东西吗?

我猜媒体查询可能是解决这个问题的一种方法,但是有没有其他的解决方案,使用flex开发更健壮的方法?

如何让页面看起来像所有屏幕尺寸没有拉伸或过度压缩?

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>

+0

你似乎使用百分比来设置其初始大小(在你的榜样60%)。这是不是预期的行为?不管flex-grow的价值如何,当屏幕增长时,这些元素是否会增长? –

+0

这是真的。最初的想法是随着屏幕宽度的减小(您知道,针对移动设备),减小它们的宽度。但是,反过来也是如此。 – snow

+1

如果您不想让内容伸展,可以将最大宽度放到您的容器中。 – GvM

这是你的问题的根源:

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

如果你告诉一个图像是width: 100%height: 360px,考虑如何播放出来。

宽度始终是容器的全长。无论屏幕是宽还是窄,图像都会随之而来。

但是你已经设置了360px的固定高度。那里没有灵活性。

因此,图像在水平方向具有灵活性,并且在垂直方向不灵活,从而导致纵横比/失真的损失。

对于这个问题的几种可能的解决方案:

+0

嗨@Michael_B,您分享的链接中的一个已接受的答案提到'不要设置宽度,高度或边距.'。我不认为任何理智的人会尝试设置背景图像的宽度和高度。并且使用背景图像对容器执行此操作将不会显示图像。 – snow

+0

我提供的链接共有17个答案。我在回复他们之前先回顾他们。有各种不错的解决方案。接受的答案只是一个 - 碰巧为发布问题的人工作。 –

+1

在最低投票答案中找到了最佳解决方案(它只提供了链接)。谢谢 – snow