html - 呈现小于宽度/高度指定的 Flex 元素

Question

我有一个用 flexbox 制作的网页(至少这部分是这样)。右边是一些看起来很小的图像，虽然它应该更大。

任何人都可以看到问题可能是什么？

在这里你可以看到我的样子:



我尝试按百分比制作图像并尝试段落的填充和边距，但没有任何效果。

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 63px;
  font-size: 60px;
  font-weight: ligter;
}

.smalltext {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
  margin-left: -5px;
}

#hoverr:hover {
  border-radius: 25px;
  background: #464646;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left {
  width: 25%;
}

.paragraphs {
  padding: 0 9%;
  flex-grow: 0;
}

.container img {
  width: 600px;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="left">
    <div id="methods" class="square"><span class="Capital">M</span>
      <span class="smalltext">Methods</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img src="http://www.placebacon.net/400/300" alt="Bacn">

</div>
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>

Answer 1

flex 元素的初始设置是 flex-shrink: 1 .这意味着允许元素根据需要收缩以避免溢出容器。

您需要禁用此功能。

将此添加到您的代码中:

.container img {
  width: 600px;
  flex-shrink: 0;
}

或者，根据 flexbox 规范中的建议，使用此方法:

.container img {
  flex: 0 0 600px; /* flex-grow, flex-shrink, flex-basis */
}

7.2. Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 63px;
  font-size: 60px;
  font-weight: ligter;
}

.smalltext {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
  margin-left: -5px;
}

#hoverr:hover {
  border-radius: 25px;
  background: #464646;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left {
  width: 25%;
}

.paragraphs {
  padding: 0 9%;
  flex-grow: 0;
}

.container img {
  flex: 0 0 600px; /* new */
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="left">
    <div id="methods" class="square"><span class="Capital">M</span>
      <span class="smalltext">Methods</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img src="http://www.placebacon.net/400/300" alt="Bacn">

</div>
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>