Как победить такой флекс?

Question

[Oleg Smychenko]

Приветствую всех уважаемых специалистов!

Помогите выйти из ступора
Есть такой код:



на выходе надо получить такое:



Если честно - я не девственник, с флексами уже было много раз, но этот раз, но как уж сложновато!
Завис на полдня и продолжаю висеть!

Картинки в псевдиках сюда не вписывал, не до этого, если что, их размеры должны быть 50*50
Размеры блоков (350рх) и контнейнера (1220рх) - макетные. Величины и стили шрифтов - тоже, разве что Ариал стоит, а не макетный. Но то такое...

Собственно вопросы:
1. Как правильно сделать перенос в желтых блоках( таки
или внутренними паддингами ограничить ширину блока с аголовком). и задать им нужную высоту? ( наверное, в размер псевдиков, все таки, не меньше 50*50)
2. Как правильно отцентрировать по вертикали внутри желтых?
3. Как сделать ряд желтых в одинаковую высоту, точно так же как и ряд белых.
4. А может все-таки ну его в пень этот флекс, и сделать три колонки с тремя абзацами?
5. ну или на крайняк - две строки: 3 title + 3 text c фиксированной шириной и flex-wrap: wrap переносом? так тогда структуре блока капец, правильно?...
В общем - синапсы уже закончились... помогите. хотя бы дельным советом!

P. S.: Вообще-то, я его как бы изначально уже сделал но потом начал подгонять под Pixel Perfect и все сломал! А вернуть не могу - завис нипадеццки!!! :-( Печалька! (((((

Comments

[Oleg Smychenko]

Uneasy Hearts Weigh the Most, та как бэ - это в рамках курса. ДЗ проверяют менторы..Вот оттуда всё и началось.

Answer 1

[Legal Adviser]

На планшете не удобно, но думаю, что как то так:

container {
  max-width: 1220px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.title {
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #01353E;
}

.inschool {
  background-color: #336699;
}

.inschool__title {
  margin-bottom: 20px;
  text-align: center;
  background-color: #E69EFF;
}

.inschool__column {
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #E69EF1;
  border: 2px solid red;
}

.column__item {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  text-align: center;
  background-color: #4CBA00;
  border: 2px solid #00FFFA;
  padding: 0 5px;
  flex: 1 1 350px;
}

.column__title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  border: 2px solid #000;
  background-color: #FFEE00;
  margin-bottom: 5px;
}

.column__text {
  font-size: 14px;
  line-height: 18px;
  letter-spacing;
  0.6px;
  text-align: left;
  padding: 0 5px;
  background-color: #E6EEF1;
  border: 2px solid #000;
  /*flex: 1 0 auto;*/


}

Comments

[Oleg Smychenko]

Спасибо за развернутый ответ, но попробую уже завтра! на сегодня мыслительные процессы уже, к сожалению, не доступны по причине перегрева ЦП! )))