Flexbox как убрать перенос блока на новую стороку

Question

Есть flexbox сетка

.news_items {
  display: flex;
  flex-wrap: wrap;
}

.news_item {
  width: 33%;
}

.news_item:first-child {
  width: 50%;
}

.news_item:nth-child(2) {
  width: 50%;
  height: 230px;
}

.news_item:nth-child(3) {
  width: 50%;
  height: 230px;
  align-self: flex-start;
}

.news_item>img {
  width: 388px;
  height: 231px;
}

.news_item:first-child>img {
  width: 588px;
  height: 469px;
}

.news_item:nth-child(2)>img {
  width: 585px;
  height: 230px;
}

.news_item:nth-child(3)>img {
  width: 585px;
  height: 230px;
}

<section class="news">
  <h2>Новости</h2>
  <div class="news_items">
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
  </div>
</section>

Хотел узнать, почему блок nth-child(3) переносится на строку под first-child, а не под nth-child(2)? И как сделать, чтобы блок оставался под nth-child(2)?

Answer 1

flex-wrap: wrap; разрешает перенос на новую строку вообще немного странный код у вас. дочерние элементы в сумме составляют больше 100%.

.news_items {
  display: flex;
  
}

<section class="news">
  <h2>Новости</h2>
  <div class="news_items">
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
    <div class="news_item">
      <img src="img/work1.png">
    </div>
  </div>
</section>

Answer 2

Если стоит задача сохранить все элементы на одном уровне вложенности, то для такой структуры, как на картинке, лучше использовать display: grid. Флексом без добавления лишних обёрток так не сделать.

.news_items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

.news_item {
  background-color: #555;
  min-height: 50px;
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight:bold;  
}
.news_item:first-child{
  grid-row: span 2;
  grid-column: span 3;
}
.news_item:nth-child(2),
.news_item:nth-child(3){
  grid-column: span 3;
}

<section class="news">
  <div class="news_items">
    <div class="news_item">1</div>
    <div class="news_item">2</div>
    <div class="news_item">3</div>
    <div class="news_item">4</div>
    <div class="news_item">5</div>
    <div class="news_item">6</div>
  </div>
</section>

БЛОГ НА HUSL

Flexbox как убрать перенос блока на новую стороку

Ответы (2 шт):