javascript - 显示: flex does not work时如何解决

Question

早上好。我有一个错误。我尝试添加 display: flex 以使用 flex-wrap: wrap 以水平线显示这些 div，如果有可用宽度，则换行。为什么它现在不起作用？

.header {
  width: 100%;
  height: auto;
  margin: auto;
}

.header .header__center {
  width: 90%;
  height: 100%;
  margin: auto;
}

.header .header__center .row {
  width: 100%;
  height: auto;
  text-align: center;
}

.header .header__center .row .header__bussword-text {
  font-size: 45px;
  color: #353535;
  padding-top: 40px;
  padding-bottom: 30px;
}

.header .header__center .row01 {
  width: 90%;
  display: flex;
  margin: auto;
  overflow: none;
}

.header .header__center .row01 .ref__square {
  width: 150px;
  height: 180px;
  background: #fff;
  border: 1px solid #ff3b49;
  position: relative;
  margin: 5px;
}

.header .header__center .row01 .ref__square:nth-child(1):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("fluid.png") no-repeat;
  background-size: 190%;
  background-position: center;
  opacity: .7;
}

.header .header__center .row01 .ref__square .ref__logo-container {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
}

.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
  max-width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.header .header__center .row01 .ref__square .ref__information {
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.header .header__center .row01 .ref__square .ref__information .ref__link {
  color: #050505;
}

.header .header__center .row01 .ref__square .ref__information .ref__code {
  font-weight: 600;
}

<div class="header">
  <div class="header__center">
    <!-- Specific container -->
    <a target="_blank" href="http://g4skins.com/ref/DDVX">
      <div class="reflinks-column row01">
        <div class="ref__square">
          <div class="ref__logo-container">
            <img src="g4.webp" class="ref__image">
          </div>
          <div class="ref__information">
            <p class="ref__link">g4skins.com</p>
            <p class="ref__code">Code: DDVX</p>
            <p class="ref__prize">Free cash</p>
          </div>
        </div>
      </div>
    </a>
    <!-- Specific container -->
    <a target="_blank" href="https://csgopolygon.com">
      <div class="reflinks-column row01">
        <div class="ref__square">
          <div class="ref__logo-container">
            <img src="csgopolygon.png" class="ref__image">
          </div>
          <div class="ref__information">
            <p class="ref__link">csgopolygon.com</p>
            <p class="ref__code">Code: chudy69</p>
            <p class="ref__prize">Free cash</p>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Answer 1

您已放置 display:flex在 .row01只有1个 child 。如果要排序 .row01你要flex应用于父/容器。所以我做了 .my_cool_flex_container作为 display:flex 的父级.

.my_cool_flex_container {
  display: flex;
}

.header {
  width: 100%;
  height: auto;
  margin: auto;
}

.header .header__center {
  width: 90%;
  height: 100%;
  margin: auto;
}

.header .header__center .row {
  width: 100%;
  height: auto;
  text-align: center;
}

.header .header__center .row .header__bussword-text {
  font-size: 45px;
  color: #353535;
  padding-top: 40px;
  padding-bottom: 30px;
}

.header .header__center .row01 {
  width: 90%;
  margin: auto;
  overflow: none;
}

.header .header__center .row01 .ref__square {
  width: 150px;
  height: 180px;
  background: #fff;
  border: 1px solid #ff3b49;
  position: relative;
  margin: 5px;
}

.header .header__center .row01 .ref__square:nth-child(1):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("fluid.png") no-repeat;
  background-size: 190%;
  background-position: center;
  opacity: .7;
}

.header .header__center .row01 .ref__square .ref__logo-container {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
}

.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
  max-width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.header .header__center .row01 .ref__square .ref__information {
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.header .header__center .row01 .ref__square .ref__information .ref__link {
  color: #050505;
}

.header .header__center .row01 .ref__square .ref__information .ref__code {
  font-weight: 600;
}

<div class="header">
  <div class="header__center">
    <h1>Checkout my new flex container below!</h1>
    <div class="my_cool_flex_container">
      <!-- Specific container -->
      <a target="_blank" href="http://g4skins.com/ref/DDVX">
        <div class="reflinks-column row01">
          <div class="ref__square">
            <div class="ref__logo-container">
              <img src="g4.webp" class="ref__image">
            </div>
            <div class="ref__information">
              <p class="ref__link">g4skins.com</p>
              <p class="ref__code">Code: DDVX</p>
              <p class="ref__prize">Free cash</p>
            </div>
          </div>
        </div>
      </a>
      <!-- Specific container -->
      <a target="_blank" href="https://csgopolygon.com">
        <div class="reflinks-column row01">
          <div class="ref__square">
            <div class="ref__logo-container">
              <img src="csgopolygon.png" class="ref__image">
            </div>
            <div class="ref__information">
              <p class="ref__link">csgopolygon.com</p>
              <p class="ref__code">Code: chudy69</p>
              <p class="ref__prize">Free cash</p>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>