написать впереди
Макет веб-страницы — это технология, которую необходимо изучить и освоить, когда вы начинаете работать с внешним интерфейсом. Просто предоставив вам веб-сайт, вы можете быстро проанализировать структуру веб-страницы, а затем построить модель, что является основным требованием для начала работы с макетом веб-страницы.
Как новичок во внешнем интерфейсе, вы можете использовать некоторые традиционные методы макета блочной модели (отображение + позиция + плавание) при обучении. Многие друзья считают, что писать некоторые стили в этом традиционном макете громоздко и неудобно. Например, традиционный реализация вертикального центрирования заключается в следующем.
Первый способ реализации:
Первоначально, когда для внешнего контейнера не задана высота, он будет прилипать к внутреннему элементу, но когда верхний и нижний отступы в контейнере имеют одинаковое значение, достигается вертикальное центрирование.
Второй способ реализации:
Используйте свойство Vertical-align для вертикального центрирования.
Но этот атрибут часто легко сделать, не знаю, когда использовать, иногда устанавливаю это свойство и вступаю в силу, что происходит? Это также проблема, что новички, как правило, являются самой головной болью.Содержание, связанное с этим свойством, не является написанием двух статей.Эта статья не участвует.
Третий способ реализации:
Используйте line-height, чтобы установить высоту строки родительского контейнера для вертикального центрирования, но только для однострочного текста.
На самом деле существует много традиционных методов реализации в макете веб-страниц с вертикальным центрированием, но слишком сложно выбирать в стольких различных ситуациях.Есть ли у нас способ добиться вертикального центрирования, будь то встроенный элемент или блочный элемент? ?
Давайте попробуем Flex, которым мы хотим поделиться сегодня, и попробуем реализовать вертикальное центрирование следующим образом:
Вертикальное центрирование можно легко добиться, просто установив эти два свойства в CSS внешнего контейнера.
Полный код реализован следующим образом:
Разве второй не очень удобен? По сути, это код вертикального центрирования, align-items: center;
Итак, сегодня Xiaolu поделится новым методом компоновки, который может быть новым для тех, кто только изучает интерфейс, но, как и некоторые продвинутые игроки, этот макет часто гибко используется в проектах и использовался многими разработчиками. мне это нравится, и я влюбился в этот макет, когда я его использовал - макет Flex.
Прочитав эту статью, Xiaolu также заставит вас влюбиться в макет Flex благодаря живой и интересной анимации.
карта разума
1. Что такое макет Flex?
Гибкий макет также является гибким макетом, так называемая гибкость обеспечивает большую гибкость макета страницы.
Мы можем поместить контейнер (div, span и т. д.) и установить для его свойства отображения CSS значение flex, а затем мы можем использовать макет Flex.
PS: Как только контейнер устанавливает display: flex layout, float, vertical-align, clear и другие свойства в традиционном макете, который мы используем, полностью недействительны. Но мы можем сделать макет через свойства, установленные Flex.
2. Знайте макет Flex
Потому что, когда мы снова используем традиционную компоновку, очень проблематично выровнять элементы для вертикального центрирования. Чтобы лучше решить эту проблему, в макете Flex предусмотрено, что устанавливаются горизонтальное и вертикальное направления. Независимо от того, располагаем ли мы его горизонтально или вертикально, что облегчает написание.
Кроме того, макет Flex задает три положения: левое, среднее и правое, и все они имеют соответствующие свойства, поэтому вы можете легко установить положение элемента.
Просто разговаривая и не тренируя поддельный дескриптор, мы начали писать код и практиковать его, а также открывать компилятор с помощью Xiaolu.
3, основные свойства контейнера
3.1 flex-direction
Это свойство в основном используется для настройки ориентации элементов макета, например, если вы хотите расположить их вертикально. следующим образом:
flex-direction: column
flex-direction: row
Обычно используются два вышеуказанных, два других расположены в противоположных направлениях:
flex-direction: column-reverse;
flex-direction: row-reverse;
3.2 flex-wrap
Что касается этого нового свойства линии, то если и когда линия элемента будет расслаблена, нам нужно выбрать, как обернуть? Не обернуть или не обернуть, или не обернуть в начало первой строки?
(1) nowrap не сворачивает
(2) перенос строки
(3) перенос на первую строку
Мы можем легко добиться этого с помощью свойств, описанных выше.
3.3 justify-content
В нашем традиционном макете раньше было несколько способов горизонтального центрирования:
Но во гибкой верстке есть несколько горизонтальных схем расположения. Это делает макет страницы более гибким и изменчивым.
(1) Flex-start (по умолчанию): выравнивание по левому краю
(2) гибкий конец: правильное выравнивание
(3) по центру: по центру
(4) интервал между: оба конца выровнены, а интервал между элементами равен
(5) пространство вокруг: интервалы с обеих сторон каждого элемента равны.
3.4 align-items
Раз есть центрирование по горизонтали, то есть центрирование по вертикали.Мы также сказали выше, что традиционная компоновка более хлопотная, поэтому нам нужно увидеть силу компоновки Flex.
С помощью этого значения свойства align-items легко добиться вертикального центрирования.
(1) flex-start: начальная точка поперечной оси выровнена.
(2) flex-end: конечная точка поперечной оси выровнена.
(3) по центру: выравнивается середина поперечной оси.
(4) базовый уровень: базовое выравнивание первой строки текста проекта.
(5) растяжение: если для элемента не задана высота или задано значение авто, он будет занимать высоту всего контейнера.
4. Атрибуты одного элемента в контейнере
Наша верхняя часть — это некоторые настройки свойств для внешнего контейнера, а некоторые из наших свойств ниже — для некоторых настроек свойств элементов в контейнере. Давайте рассмотрим наиболее часто используемые из них один за другим.
4.1 flex-grow
Это свойство в основном используется для определения коэффициента увеличения элемента, и его значение по умолчанию равно 0.
Если для всех элементов внутри контейнера установлено значение 1, оставшееся пространство делится поровну; если для одного из них установлено значение 2, оставшееся пространство делится пропорционально.
4.2 flex-shrink
Это свойство в основном используется для определения коэффициента уменьшения элемента, и значение по умолчанию равно 1.
Если свойство flex-shrink всех элементов равно 1, при недостатке места они будут пропорционально уменьшены. Если свойство flex-shrink элемента равно 0, а остальные элементы равны 1, первый не будет сжиматься при недостатке места.
4.3 flex-basis
Браузер вычислит, есть ли лишнее пространство на главной оси в соответствии с этим свойством. Значение по умолчанию — авто.
4.4 flex
Это свойство представляет собой сокращенную форму трех вышеуказанных свойств, значение по умолчанию — 0 1 auto.
Есть два других свойства ярлыка, auto (1 1 auto) и none (0 0 auto), на основе которых браузер вычисляет соответствующее значение.
резюме
После того, как мы сегодня изучили гибкий макет, это очень просто, маме больше не нужно беспокоиться о вашем макете.
Причина, по которой я делюсь этой статьей, заключается в том, что я видел много новичков в группе обмена, которые использовали традиционные макеты DIV, поэтому, просто вводя статью, дайте вам знать, что в дополнение к традиционным макетам есть также макеты Flex. , Макет сетки, в быстром макете — это фреймворк пользовательского интерфейса. Например, Bootstrap, Element-ui и т. д.
Как правило, при разработке проектов чаще используются фреймворки.Начинающим рекомендуется создавать макет самостоятельно.Обычно используются вышеперечисленные свойства Flex.Если вы хотите узнать больше, обратитесь к официальной документации.
❤️ Не забывайте оставлять следы своего обучения [Нравится + Избранное + Комментарий]
Статья + анимация писалась несколько часов, ставьте лайк и поддержите. Хи-хи, если вам это не нравится, это показывает, что вы очень эгоистичны, и вы боитесь, что такую хорошую статью увидят другие. Просто шучу.
Вы можете подписаться на официальный аккаунт Xiaolu: «Xiaolu Animation Learning Programming», а фоновый ответ: «Ресурсы». Я пришлю вам копию материалов для самостоятельного изучения Сяолу и приглашу вас в группу бесплатного обучения!
Информация об авторе:
【Автор】：Сяолу
[Исходный публичный аккаунт]: Программирование обучения анимации Xiaolu.
[Введение]: вместе с Xiaolu изучите программирование с нуля с помощью анимации и представьте друзьям интерфейсный веб-домен, структуру данных и алгоритм, сетевые принципы и т. д. в простой для понимания форме. Сначала поставьте небольшую цель, создайте 1000 оригинальных технических статей по анимации и работайте вместе с друзьями, чтобы учиться вместе!Официальный аккаунт отвечает на «данные», чтобы получить множество материалов для самостоятельного изучения с нуля!
【Инструкции по перепечатке】: Пожалуйста, укажите источник перепечатки, спасибо за сотрудничество! ~