Как выровнять дочерние элементы в Flexbox?

Question

[Vladislav]

Помогите пожалуйста.
нужно посредством flexbox сделать так, чтобы блок .new был вровень с блоком .new-content который располагается по середине с равным расстоянием между вложенными в него блоками .new-box.
Голову уже сломал, не могу сделать.
p.s. картинку с визуализацией приложил =)
Спасибо!

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f0e1;
}

.new {
  display: flex;
  align-self: normal;
} /* в этом блоке заголовок h1*/

.new-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.new-box {
  width: 20%;
  height: 400px;
/*здесь картинка*/
}

Картинка для наглядности:

Comments

[Ilya Olovyannikov]

https://codepen.io/Olovyannikov/pen/RwaMWMV

Answer 1

[Никита Михайлов]

Задай .new такую же ширину, как и у .new-content

Comments

[Vladislav]

Задал new-content { width: 100%;} .new-box растянулись по всей ширине. Но .new как был на своем месте так и остался.

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f0e1;
}

.new {
  display: flex;
  align-self: normal;
}

.new-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.new-box {
  width: 20%;
  height: 400px;
}

[Никита Михайлов]

Выложи код куда нибудь. Например на codepen

[Vladislav]

Никита Михайлов, https://codepen.io/vladislav-semakin/pen/zYqWvoQ

Надпись - Новое в подписке нужно чтобы было на одном уровне с блоком картинки

[Никита Михайлов]

При таком подходе это очень сложная задача. Суть в том, что при space-around свободное место по краям контейнера зависит от количества элементов внутри. Лучше сделать space-between, а блоку content задать внутренние отступы слева и справа.

[Vladislav]

Никита Михайлов, понял. Спасибо большое!!!

Answer 2

[Арсений Матыцин]

Задай new-content максимальную ширину, как это делают для обычного container-класса, а лучше именно container класс и используй тут и внутри .new. Обычно именно так и делают.

Comments

[Vladislav]

Задал new-content { width: 100%;} .new-box растянулись по всей ширине. Но .new как был на своем месте так и остался.
Еще вопрос. Не могу понять, почему текст под картинкой вылазит за блок .content для понимания бордер отрисовал.

<div class="content">
      <div class="new">
        <h2>Новое в подписке</h2>
      </div>
      <div class="new-content">
        <div class="new-box">
          <img src="img/glass.jpg" alt="" />
          <div class="text">
            <h4>Стекло</h4>
            <p>2019, Триллер/Драма</p>
          </div>
        </div>
        <div class="new-box">
          <img src="img/bryklin.jpg" alt="" />
          <h4>Сиротский Бруклин</h4>
          <p>2019, Детективный фильм/Криминал</p>
        </div>
        <div class="new-box">
          <img src="img/zveropolis.jpg" alt="" />
          <h4>Зверополис</h4>
          <p>2016, Мультипликация/Комедия</p>
        </div>
        <div class="new-box">
          <img src="img/starWars.jpg" alt="" />
          <h4>Звёздные войны: Пробуждение Силы</h4>
          <p>2015, Боевик/Научная фантастика</p>
        </div>
      </div>
    </div>

CSS

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f0e1;
}

.new {
  display: flex;
  align-self: normal;
}

.new-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.new-box {
  width: 20%;
  height: 400px;
}