Вёрстка Senior Вёрстка на практике обновлено
Равные колонки при разном содержимом
Условие
Три колонки в .row должны быть одинаковой ширины независимо от длины текста внутри и не выходить за контейнер. Длинное слово не должно расширять свою колонку.
Что проверяют тесты
колонки одинаковы
не выходят за контейнер
длинное слово переносится
Как подойти
Главная ловушка флексбокса: min-width: auto у элементов означает «не уже своего содержимого», поэтому колонка с длинным словом раздувается, несмотря на flex: 1. min-width: 0 снимает это ограничение - приём, который приходится помнить постоянно, особенно в связке с обрезкой текста многоточием. Третье свойство разрешает разрывать само слово.
Подсказки: 3
- flex: 1 сам по себе не делает колонки равными при разном содержимом.
- У флекс-элемента min-width по умолчанию auto - он не даёт сжаться меньше содержимого.
- Неразрывное слово надо разрешить переносить явно.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.