Как сделать блок такой на flex?

Question

[kentos]

Здравствуйте, можете помочь как такой блок реализовать ?


При адаптиве, один под одним, я пытался делать на flex, но ничего не выходило

<div class="container container_brand">
                <div class="logo_brand">
                    <img src="/build/img/brands_gippo.png" alt="">
                </div>
                <div>
                    <h1>Brand</h1>
                 <p>Бренд Catrice, принадлежащий немецкому концерну Сosnova GmbH появился на мировом рынке в 2004 году. Сегодня компании также принадлежат такие известные бренды как essence и LOV.</p>
                <p>
                        Качество выпускаемой продукции является главным приоритетом для бренда. Поэтому поставщики Catrice также являются предметом строгого контроля соответствия стандартам высокого качества.
                </p>
                </div>
            </div>

в css указал

.container_brand {
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

Comments

[Евгений]

где код на css?

[kentos]

Евгений, Up

[Andrew]

а флекс причем?

[Александр AS]

А как у вас сейчас?

[Ankhena]

Осталось дочерним элементам задать нужные стили.
Например, размер логотипа (или его обертке) и flex-shrink его обертке. flex: 1 блоку с текстом

Answer 1

[Вадим Кот]

Чтобы при адаптиве было один под одним

https://codepen.io/web-tech/pen/OeOMEX

Comments

[Сергей delphinpro]

Чтобы при адаптиве было в столбик, вообще ничего менять не нужно
Люди! Вы забыли, что блоки по дефолту выстраиваются в столбик?

[Сергей delphinpro]

.container_brand {
  max-width: 700px;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .container_brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}