SB
а дальше — словарь синонимов
Size: a a a
2020 April 16
NL
Коллеги, привет. Я новичок в CSS и ищу помощи в создании такой разметки. Красный квадрат 1 имеет размер 2x2, высота синего бокса 5 определяется контентом, а остальные размеры по идее должны выводиться. Как это можно сделать с помощью flexbox?
NL
Я сделал пример здесь https://codepen.io/nlinker/pen/VwveJEw
Буду благодарен за помощь.
Буду благодарен за помощь.
NL
То есть в этом примере на кодпене я захардкодил размеры всех боксов, но это плохо, как бы избежать этого. Вроде бы flexbox достаточно мощный для данного случая, нет?
NL
A Complete Guide to Flexbox прочитал, но что-то непонятно как достичь желаемого.L
То есть в этом примере на кодпене я захардкодил размеры всех боксов, но это плохо, как бы избежать этого. Вроде бы flexbox достаточно мощный для данного случая, нет?
а как получает высоту блок 2?
SB
такой лейаут — идеально для гридов
SB
иначе же — делай две строки
NL
а как получает высоту блок 2?
Захардкожен,
width: 2em, height: 2emSB
ну я чот не могу придумать прям чего-то более разумного чем указывать размеры каждому блоку и ставить флекс-врап
L
Захардкожен,
width: 2em, height: 2emзначит и ширину с высотой блока 1 модно захардкодить
NL
значит и ширину с высотой блока 1 модно захардкодить
Ой, ошибся. Высота зелёного блока 2 зависит от 1. А ширина (100% - 2em), но это писать нельзя, нужно как-то сделать, чтобы оно само вывелось.
NL
То есть фиксированный блок только красный, 1.
L
Ой, ошибся. Высота зелёного блока 2 зависит от 1. А ширина (100% - 2em), но это писать нельзя, нужно как-то сделать, чтобы оно само вывелось.
что вывелось? как блок 1 получает значения высоты или ширы?
NL
что вывелось? как блок 1 получает значения высоты или ширы?
блок 1 фиксированного размера.
L
блок 1 фиксированного размера.
какого?
L
NL
какого?
.box.red {
background: red;
width: 2em; /* fixed */
height: 2em; /* fixed */
}NL
Проверяю идею с двумя строками
VY
Коллеги, привет. Я новичок в CSS и ищу помощи в создании такой разметки. Красный квадрат 1 имеет размер 2x2, высота синего бокса 5 определяется контентом, а остальные размеры по идее должны выводиться. Как это можно сделать с помощью flexbox?
