CSS | Как сделать такой макет, используя FlexBox или media-query?

Question

У меня есть изображение, растянутое на весь экран браузера. Мне надо наложить поверх изображения блок с Текстом 1, а также блок с Тексом 2. В зависимости от размера окна браузера, Текст 1 должен оставаться в том же положении, но размер чуть меньше, а Текст 2 должен переходить на новую строку после изображения и примыкать к левой части. Помогите, пожалуйста.

<div class="container">
<img src="images/image.jpg" width="100%" alt="Image">
<div class="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Answer 1

Медиа здесь ни к чему. Можно легко сделать при помощи свойства flex-wrap.

.container {
    display: flex;
    justify-content: space-around;

    /* Когда блоки уже не будут помещаться в одну строку, они будут переноситься на новую */
    flex-wrap: wrap;

    /* Обязательно указываем ширину */
    width: 100%;

    /* Если картинка визуально фоновая, то она и должна быть фоновой */
    background: url("images/image.jpg") center no-repeat;
}

.container > div {
    /* Обязательно указываем ширину и минимальную ширину */
    width: 50%;
    min-width: 20rem;
}

БЛОГ НА HUSL

CSS | Как сделать такой макет, используя FlexBox или media-query?

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