添加额外 div 后 Flexbox 停止正常工作

Question

我想制作一个简单的响应式网站，在背景前面有 3 张图片，每张图片都有一个按钮，当您将鼠标悬停在上面时，它们会被覆盖。问题是当我添加额外的容器以进行图像悬停叠加时，justify-content 和 row-wrap 停止工作，它们不再正确地居中图像。如果我删除所有容器 div，一切都会恢复正常。

.background {
  display: inline-block;
  position: relative;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.mountain {
  pointer-events: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  z-index: -1;
}

.tabs {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-flow: row wrap;
  gap: 10px;
  padding-top: 200px;
}

.container1 {
  position: relative;
  left: 80px;
}

.container1:hover .portraits {
  opacity: 0.5;
}

.portraits {
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container2 {
  position: relative;
  width: 480px;
  max-height: 100%;
}

.container2:hover .secondtab {
  opacity: 0.5;
}

.secondtab {
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container3 {
  position: relative;
  margin-right: 80px;
  ;
}

.container3:hover .thirdtab {
  opacity: 0.5;
}

.thirdtab {
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

<div class="background">
  <img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
  <div class="buttons">
    <button class="Contacts">CONTACTS</button>
    <button class="Aboutme">ABOUT ME</button>
    <section class="tabs">
      <div class="container1">
        <input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
        />
      </div>
      <div class="container2">
        <input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
        />
      </div>
      <div class="container3">
        <input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
        />
      </div>
    </section>

Answer 1

将 .tabs class 上的 space-between 更改为 space-around。然后，删除您在弹性项目上设置的所有值。例如，我删除了您在 container1 上设置的 left: 80px 值，并从 container3.

中删除了 margin-right

设置这些值对 flexbox 会适得其反，因为您指示浏览器将这些容器定位在父容器中的相对静态位置。如果您允许 flex 完成它的工作，这将更加灵敏。

.background {
  display: inline-block;
  position: relative;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.mountain {
  pointer-events: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  z-index: -1;
}

.tabs {
  display: flex;
  justify-content: space-around;
  align-content: space-between;
  flex-flow: row wrap;
  padding-top: 200px;
}

.container1 {
  display: flex;
  position: relative;
}

.container1:hover .portraits {
  opacity: 0.5;
}

.portraits {
  display: flex;
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container2 {
  display: flex;
  position: relative;
  width: 480px;
  max-height: 100%;
}

.container2:hover .secondtab {
  opacity: 0.5;
}

.secondtab {
  display: flex;
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container3 {
  display: flex;
  position: relative;
}

.container3:hover .thirdtab {
  opacity: 0.5;
}

.thirdtab {
  display: flex;
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

<div class="background">
  <img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
  <div class="buttons">
    <button class="Contacts">CONTACTS</button>
    <button class="Aboutme">ABOUT ME</button>
  </div>
  <section class="tabs">
    <div class="container1">
      <input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
      />
    </div>
    <div class="container2">
      <input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
      />
    </div>
    <div class="container3">
      <input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
      />
    </div>
  </section>
</div>

编辑 ~ 如果您不想让图像换行，请删除所有静态（固定）宽度并使用此：

.container1,
.container2,
.container3 {
  width: calc(100%/3);
}

添加额外 div 后 Flexbox 停止正常工作

Flexbox stops working properly after adding additional div

html

css

flexbox