Осознаваете вы или нет, но каждая композиция представляет собой своего рода иерархию. Мысленное признание этой иерархии и последующее внедрение ее в ваш дизайн помогает структурировать информацию для пользователя — и сохранять ваш дизайн плотным и последовательным.
Иерархии состоят из родителей и детей. Так же, как семейные деревья, дети могут быть родителями для большего числа детей, и большинство родителей сами являются детьми. Другими словами, у вас есть предки: родители, бабушки и дедушки, прабабушки и дедушки и т. Д., И у вас есть потомки: дети, внуки и т. Д.
Каждый объект в вашем дизайне хочет иметь определенное личное пространство — или поле. Маржа — это пространство, которое объект хочет сохранить между собой и другими объекты, точно так же, как люди предпочитают держаться на определенном расстоянии от других людей в людном месте.
Объекты могут иметь разные поля для каждой стороны. Fo Например, квадрат может предпочитать оставлять 100 пикселей слева от него, но только 50 пикселей сверху. Общее практическое правило состоит в том, что объекты с одним и тем же родителем (братьями и сестрами) имеют один и тот же набор полей. Это помогает дизайну выглядеть организованным.
Изменение поля объекта изменяет расстояние между этим объектом и другими объектами.
Тесно связано с полями, но принципиально отличается от заполнения. Набивку можно рассматривать как мех: это неотъемлемая часть объекта, а не пространство вокруг него. Как и поля, отступы могут иметь разные значения для верхнего, левого, правого и нижнего края.
Отступы вступают в игру только тогда, когда у объекта есть дочерние элементы (или когда у объекта есть предопределенная ширина или высота, но давайте не будем все усложняют). Если родительский объект имеет заполнение 20 пикселей и один дочерний объект имеет ширину 100 пикселей и высоту 50 пикселей, родительский объект будет иметь ширину 140 пикселей и высоту 90 пикселей, потому что мех добавляется к размерам родительского объекта.
Последовательное использование набивки помогает стабилизировать конструкцию. Если ваш проект содержит несколько типов контейнеров (родители с детьми), даже если они служат разным целям, часто лучше использовать одну и ту же прокладку для каждого из этих контейнеров.
Контейнер, заполненный дочерними элементами, будет расти как набивка. увеличивается:
Контейнеры могут иметь — и часто имеют — как отступы, так и поля. Набивка увеличивает фактические размеры контейнера, затем поле определяет пространство между контейнером и другими объектами:
Распределение объектов в статической конструкции вряд ли является проблемой. Но пользовательские интерфейсы редко бывают статичными. Вместо того чтобы думать об объектах, имеющих фиксированное положение внутри своего родителя, полезно думать о том, что их положение определяется определенной логикой. Гибкие блоки описывают эту логику.
Содержание статьи
Выровнять: Направление (стек)
Первое, что нужно рассмотреть, — это то, как объекты будут складываться внутри их родительского объекта. Как правило, есть два варианта: вы либо складываете их боком (сверху вниз или снизу вверх), либо вертикально (слева направо или справа налево).
В CSS это называется flex-direction свойство и допустимые значения: строка | ряд-обратный | столбец | colum-reverse
Выровнять: начало, центр, конец
Представьте, что вы хотите сложить объекты слева направо, но объекты либо имеют переменную высоту, либо их родительский элемент намного выше, чем дочерние элементы. В этом случае вам нужно решить, как выровнять их по вертикали, для чего вы обычно выбираете один из трех вариантов: начало, центр или конец. Точный результат этого значения во многом зависит от выбранного вами направления.
- Start выравнивает дочерние элементы по верхнему краю родительского элемента в стеке слева направо.
- Центр выравнивает детей по вертикальному центру родителя в стопке слева направо.
- Конец выравнивает детей по внизу родительского элемента в стеке слева направо.
В CSS это поведение регулируется align-items свойство, а допустимые значения: flex-start | гибкий конец | центр | растянуть | исходный уровень | первая базовая линия | последний исходный уровень | начало | конец | самозапуск | самозакрывающийся + ... сейф | небезопасно .
Выровнять: начало, центр, конец
Обоснование очень похоже на выравнивание. Однако, когда выравнивание касается положения на поперечной оси, выравнивание определяет положение объекта на главной оси. Проще говоря: при использовании стека слева направо (по горизонтали) выравнивание определяет, где ваши дочерние элементы идут по вертикальной оси, а выравнивание касается горизонтального распределения.
Здесь также есть три обычных подозреваемые: начало, центр и конец.
Обоснование на стероидах: Пространство между, Пространство вокруг, Равномерно
К счастью, есть еще одно оправдание. Вот где действительно начинает проявляться логика flexboxes.
- Space-between равномерно распределяет пустое пространство между всеми детьми.
- Space- около выделяет одинаковое количество места по обе стороны от детей. (Визуально идентично предоставлению каждому объекту одинаковых полей, чтобы полностью занять доступное пространство.)
- Равномерно равномерно распределяет пустое пространство между всеми детьми и между ограничениями родителя. Обычно считается визуально удовлетворительным распределением объектов.
Замечание о гибких боксах и полях
Заманчиво отказаться от полей, когда вы полностью используете гибкие блоки. Однако при использовании флексбоксов поля дочерних объектов по-прежнему учитываются. Например, в ситуации слева направо, когда дочерние элементы выровнены до начала гибкого блока, если у дочерних элементов есть поля, между дочерними элементами будет промежуток:
Наконец, есть понятие абсолютных значений по сравнению с относительными значения. В дизайне объект может иметь ширину 200 пикселей, 500 или 1171 пикселей. Но как только этот объект станет частью реального пользовательского интерфейса, как он будет себя вести? Он растянется? Если да, то насколько широким он может быть? И когда область просмотра сузится, объект будет сдавлен? Как далеко вы позволите его раздавить?
Это вещи, о которых вам нужно подумать. Один совет: возьмите за привычку использовать относительные ценности. Вряд ли что-либо в пользовательском интерфейсе должно иметь абсолютные размеры. Вряд ли — потому что бывают исключения. Например, важная кнопка, которая прилипает к нижней части области просмотра, может иметь фиксированную ширину или высоту. Или всплывающее модальное окно. Или индикатор загрузки. Для чего угодно: используйте проценты и определите максимальную и минимальную ширину и высоту.
(Пока оценок нет)
Загрузка...
