Как решить, когда дисплей: не работает flex

Question

Доброе утро. У меня ошибка. Я попытался добавить display: flex, чтобы отобразить эти div в горизонтальной линии с помощью flex-wrap: wrap, чтобы разбить линию, если есть доступная ширина в конце. Почему это не работает прямо сейчас?

.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 ребенок. Если вы хотите отсортировать .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>