Как с помощью флексов создать цвет фона на половину экрана?

Question

[pablo_d]

Я создал контейнер в 1110 px и мне нужно чтобы цвет фона выходил за пределы контейнера. Т.е., чтобы одна половина монитора была одного цвета, другая половина другого.

Comments

[Lynn «Кофеман»]

Зачем для этого флексы?

Проще градиентом

[Lynn «Кофеман»]

А цвет фона по определению не может выйти за пределы контейнера

[Ankhena]

Не ясно откуда взялось требование про флексы.

Глобально варианта два:
1. Псевдоэлемент с шириной 100vw положить абсолютом под основной блок.
Задать ему фон линейным градиентом.
Ближайшему родителю у которого ширина на весь экран, задать overflow-x: hidden.
2.Положить ваш блок в обертку и ей задать фон градиентом.

https://codepen.io/Websitio/pen/bGpdzQb

Градиенты сами сделайте

[Pavel-ww]

Согласен с Lynn «Кофеман». Градиент - наиболее адекватный способ. Причем здесь флексы и причем здесь контейнер ? Это надо применять к обертке контейнера - секции или всему body - смотря какая у вас задача по дизайну. Кроме градиента можно использовать псевдо элементы before after в абсолютной позиции (width: 50% height: 100%). Но градиент значительно проще и меньше кода

[hellcaster]

Как в сетке Bootstrap 4 сделать у части фон до края окна только с одной стороны?

Answer 1

[MiniBlu]

Не совсем тебя понял :( Нарисуй лучше)
Во-первых флексы служат для разметки, а не для всякой стилизации по типу фона и т.д.
Во-вторых можно сделать 2 контейнера внутри вашего контейнера и каждый раскрасить так, как вам нужно, не?

Answer 2

[Илья]

background: linear-gradient(to left, red 50%, green 50%)