Как сделать так чтобы горизонтальный блок с тремя дивами выстроился в столбик?

Question

[Alexa Ponamareva]

Не знаю как именно сформулировать вопрос, но у меня есть горизонтальный блок (сделан через display: flex) с датой, событием и ссылкой, таких должно быть 3 вертикально.

Comments

[Ankhena]

Дело в том, что блоки в столбик выстраиваются сами.
Без флексов.
Нужно только сделать правильную разметку.

Так же нужны верхние границы полоски-ограничители (не знаю как правильнее назвать)

Полоски это обычный border

Нормально ли задавать такой макет на 3 урок человеку который никогда не изучал программирование?

Не нормально то, что вы вопросы задаете тут, а не своему преподавателю или наставнику.
(А программирование тут вообще не при чем)
Не, т.е. хорошо, что вы пытаетесь найти решение, но преподаватель на то и нужен, чтобы объяснять всё, что вам не понятно в рамках курса.

[Ankhena]

Смотрите, вообще без стилей они идут в столбик
https://jsfiddle.net/cgrw69hv/

Осталось только задать флекс элементам списка


Альтернатива: использование display: table для списка, table-row для li и table-cell для элементов внутри li.
Это пока не введут subgrid.
Но это все точно не на 3 занятии.

[Ankhena]

Alexa Ponamareva, ну и зачем вы оплачиваете работу такого препода?

[Ankhena]

Alexa Ponamareva,

Курс длится год(с#), верстка у нас я насколько поняла у всего 1 месяц, т.е 8 уроков и 4 вебинара.

Если вас устраивает подход к обучению и соотношение цена/качество, то нет вопросов.

[Ankhena]

Alexa Ponamareva, видимо, это из желания научить студента гуглить.
Потому что во-первых и в-основных, умение гуглить это основной навык разработчика.
Во-вторых, всё, с чем вы будете сталкиваться в ближайшие несколько лет давно спрошено и описано. В том числе и вчерашний и сегодняшний вопросы.

Если рассчитываете, что будете тут получать консультации по недостающим кускам курса, то скорее всего зря. Потому что через некоторое время все поймут, что происходит. И вряд ли кто-то захочет долго выполнять работу, за которую получает деньги кто-то другой.
Так что да, гугл станет вам лучшим другом.

Я не нашла курсов лучше этих в городе

Полно онлайн курсов.

Answer 1

[Евгений Винокуров]

У блока Notifications добавить flex-direction: column. Дочерние блоки упаковать в общие три блока и с ними дальше работать

Answer 2

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

По умолчанию блочные элементы занимают всю ширину вверенной области, для списка (можешь прямо списком и делать) заверни в блочный элемент, каждый элемент тоже в блочный, дописывать поведение не обязательно, но можешь flex column сделать, а полосы это типичный бордер этих пунктов.