Можно ли использовать flexbox CSS для сжатия / растяжения содержимого по обеим осям, по вертикали и по горизонтали? - PullRequest
0 голосов
/ 14 января 2020

Насколько я понимаю, контейнеры flexbox и их дочерние элементы полностью сгибаются только по одной оси, в зависимости от значения свойства flex-direction, row или column. С контейнером «row» вы можете растягивать и уменьшать ширину контейнера и отдельных ящиков, которые он содержит, но содержимое в этих ящиках не увеличивается и не уменьшается в соответствии. С другой стороны, изменение размера окна по вертикали приводит к соответствующему изменению размера содержимого. (Я думаю, что ситуация с контейнерами типа «колонна» наоборот, хотя я не пробовал их в одиночку.)

Итак, мои вопросы:

  1. Есть ли у меня это правильно? Я прочитал много хороших постов в блоге о flexbox, но ни один из них не охватывал эту характеристику c явно как основную «функцию».

  2. Есть ли только для flexbox Обходной путь, некоторое расположение строк внутри столбцов или наоборот, может быть, с указанными c свойствами установлены специальные способы?

Я попытался поместить столбчатый контейнер во flexbox, принадлежащий контейнеру строк, а затем поместить в него текст, но я не увидел изменений в поведении изменения размера - размер текста по-прежнему изменяется только тогда, когда размер окна / окна просмотра изменен по вертикали, а не по горизонтали. Смотрите этот кодекс .

(О примере: во-первых, я прошу прощения за посторонние свойства или свойства, для которых заданы значения random-i sh, но я пробовал все и вся. Я пытался свести их обратно, не испортив демо, но Я уверен, что многое можно улучшить. Svg lo go слева находится только во флекс-боксе верхнего уровня в главном контейнере для этой строки - он ведет себя, как и ожидалось, сокращается / увеличивается только с изменением размера вертикального окна. поместите скрытый lo go в третье поле справа, чтобы с полями одинаковой ширины с обеих сторон текст между ними находился по центру в окне просмотра, если вы не используете слишком большое сжатие из стороны в сторону. менее хитрый способ с flexbox для строки с центрированным текстом и lo go слева.)

...