伸缩项目在更宽的屏幕上伸展

Posted 2023-03-06

【中文标题】伸缩项目在更宽的屏幕上伸展

【英文标题】：flex items stretching on wider screens

【发布时间】：2017-03-17 21:24:15

【问题描述】：

我刚刚使用 flexbox 完成了我的第一个网页的开发。它在我的屏幕分辨率 (1326x768) 上看起来很棒，但是当我在更大的屏幕 (1894x787) 上测试它时，内容看起来很疯狂。以下是屏幕截图：

1326x768

在更高的屏幕分辨率下

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 
  /*	border: solid;
*/
  display: flex;
  flex-direction: row;
  margin-right: 60px;
  font-size: 0.8rem;
  justify-content: center;
  position: relative;
  /*	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;
  /*	border:solid;
*/
  margin-left: 350px;
  margin-right: 60px;

.main-content-left 
  /*	border:dashed;*/
  /*width: 200px;
	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;
	height: 200px;*/
  margin-left: auto;
  flex: 0 1 40%;

.main-content-left-heading p 
  /*margin:0;
	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;
  /*	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;
  /*	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;
  /*	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 
  /*	border:solid;
*/
  display: flex;
  flex-direction: row;
  margin-top: solid;
  padding-top: 20px;
  /*	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;*/
  /*	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">
        <!-- 							<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">
        <!-- 							<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">
        <!-- 							<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>

【问题讨论】：

您似乎使用百分比来设置其初始大小（在您的示例中为 60%）。这不是预期的行为吗？不考虑 flex-grow 的值，当你的屏幕变大时，元素不应该变大吗？

确实如此。最初的想法是随着屏幕宽度的减小而减小它们的宽度（你知道，对于移动设备）。但可惜反过来也是如此。

如果你不想让内容拉伸，你可以把 max-width 放到你的容器里。

@GvM 这是个好主意。虽然这会增加空白并弄乱外观

我明白了，你想要一个全宽的网页吗？

【参考方案1】：

这是您问题的根源：

.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 的固定高度。那里没有灵活性。

因此，图像水平灵活而垂直不灵活，从而导致纵横比损失/失真。

这个问题有几种可能的解决方案：

Responsive css background images How to make CSS background-image responsive?

【讨论】：

嘿@Michael_B，您共享的其中一个链接中的已接受答案提到了Do not set width, height, or margins.。我认为任何理智的人都不会尝试将宽度和高度设置为背景图像。并且对带有背景图像的容器执行此操作根本不会显示图像。

我提供的链接一共有17个答案。在将它们发布到我的答案中之前，我对其进行了审查。有各种好的解决方案。接受的答案只是一个——恰好为发布问题的人工作的那个。

在最低投票答案中找到了最佳解决方案（它只提供了链接）。谢谢

嗨@Michael_B 如果您在解决我的问题的答案中包含outsidethebracket.com/… 中提到的方法，我会接受这个答案。谢谢。

我熟悉该解决方案。在某些情况下，百分比填充技巧很有用。我没有向您推荐它，因为您使用的是 flexbox，并且并非所有浏览器都按预期在 flex 项目上呈现百分比填充（和边距）。请务必在 Firefox 中检查您的解决方案。见这里：***.com/a/36783414/3597276