Flex项目渲染小于宽度/高度指定的项目

Question

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

任何人都可以看到问题所在？

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

我尝试以百分比形成图像并尝试段落的填充和边距，没有任何效果。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

弹性项目的初始设置为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

     

鼓励作者使用flex控制灵活性   简而言之，而不是直接使用其纵向属性   简写正确地重置任何未指定的组件以适应   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>