Как сделать чтобы было по 2 блока на строке, а не сразу все 4?

Question

[Danil2134]

<section
        class="fon-ves"
        style="background-image: url(images/BankGra-ves.png)"
      >
        <div class="container">
          <div class="box_fon-ves">
            <div class="fon-ves_window">
              <p class="text-fon">Ты не останешься кому то должен</p>
            </div>
            <div class="fon-ves_window">
              <p class="text-fon">Ты не останешься кому то должен</p>
            </div>
            <div class="fon-ves_window">
              <p class="text-fon">Ты не останешься кому то должен</p>
            </div>
            <div class="fon-ves_window">
              <p class="text-fon">Ты не останешься кому то должен</p>
            </div>
          </div>
        </div>
      </section>

.fon-ves {
  height: 900px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.fon-ves::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.box_fon-ves {
  height: 100%;
  display: flex;
}

.fon-ves_window {
  margin-top: 20px;
  height: 200px;
  width: 180px;
  text-align: center;
  padding: 10px 3px;
  background-color: #c9ad8b;
  border-radius: 25px;
  z-index: 2;
}

.fon-title {
  color: #303030;
}

.text-fon {
  padding-top: 50px;
  font-size: 22px;
  font-weight: 500;
  color: #303030;
}

Comments

[Виктор]

2 блока на строке могут выглядеть по-разному..

[FeST1VaL]

flex-wrap: wrap; и ширина

[Ankhena]

Начать нужно с понимания того, что у вас вообще запрещен перенос. У флекса по умолчанию flex-wrap: nowrap
Т.е. сначала нужно этот перенос разрешить.
А потом сделать так, чтобы в строку помещалось только 2 элемента. Шириной родителя или шириной элементов.

Возможно, более удобный вариант это гриды и grid-template-columns: 1fr 1fr или другие нужные вам значения.

Answer 1

[alexalexes]

Используйте display: grid вместо flex. В гридах есть возможность задать табличную сетку для контейнера с элементами.