Старая статья, некоторые исследования при начале работы с мини-программами.
Flex layout — очень гибкий и удобный метод компоновки.современный браузерВ принципе, реализована полная поддержка макета Flex. В апплете WeChat механизм рендеринга WKWebView, используемый на стороне IOS, и механизм рендеринга, используемый на стороне Android.X5, а также реализовать поддержку Flex. Поэтому, чтобы сделать макет более удобным в разработке апплета, необходимо больше узнать об использовании макета Flex в апплете. В этой статье будут представлены различные свойства макета Flex и непосредственное использование wxss для написания примеров.Рабочая среда — это инструмент разработчика апплета.
Основная концепция макета Flex
Flex-макет применяется непосредственно к flex-контейнеру, а объектами макета являются отдельные элементы элементов («элементы») в контейнере. Основная концепция компоновки элементов проекта заключается в двух осях: главной оси и поперечной оси. Компоновка выполняется путем управления расположением элементов проекта на главной оси и поперечной оси, как показано на следующем рисунке:
Здесь следует отметить, что направление двух осей не фиксировано (им можно управлять с помощью flex-direction); кроме того, flex-контейнер может содержать flex-контейнер, то есть может иметь несколько основных осей и поперечных осей .
Свойства Flex-контейнера
Существует 6 свойств контейнера:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
Установите направление шпинделя:
- строка → (по умолчанию)
- ряд-обратный ←
- столбец ↓
- обратная колонка↑
flex-wrap
Укажите, как переносить элементы на главной оси, если контейнер не может вместить все элементы в направлении главной оси (когда flex-направление — столбец, а столбец — обратное, это «изменение столбца»):
- nowrap (по умолчанию), то есть без обтекания каждый элемент будет сжиматься, чтобы сделать ширину меньше при касании
- Wrap: Wrap, обычный сверху вниз
- wrap-reverse: перенос строки, но направление расположения каждой строки на поперечной оси противоположно направлению переноса
flex-flow
Сокращение для flex-direction и flex-wrap, по умолчанию — «перенос строки».
justify-content
Все элементы выровнены по главной оси:
- нет (по умолчанию)
- центр: центр на главной оси
- flex-start: Выровнять начальную точку главной оси
- fex-end: выравнивание конечной точки шпинделя
- space-between: оба конца выровнены, а интервал между элементами равен
- пространство вокруг: равные интервалы с обеих сторон каждого элемента
align-items
Выравнивание всех элементов по поперечной оси:
- растягивание (по умолчанию), то есть, когда элемент принимает автоматический размер, он растягивается, чтобы заполнить размер контейнера в поперечном направлении.
- центр: центр на поперечной оси
- flex-start: выравнивание начала поперечной оси
- flex-end: Выровнять конец поперечной оси
- Базовая линия: проекты, выровненные с базовым уровнем первой строки текста
align-content
Определяет выравнивание нескольких шпинделей. Если в проекте только один шпиндель, он не будет работать. Несколько шпинделей обычно появляются при намотке на шпиндель:
- растянуть (по умолчанию), то есть при автоматическом изменении размера элементы на главной оси будут растягиваться, чтобы занять всю поперечную ось.
- центр: центр на поперечной оси
- flex-start: выравнивание начала поперечной оси
- flex-end: Выровнять конец поперечной оси
- space-between: оба конца выровнены, а интервал между элементами равен
- пространство вокруг: равные интервалы с обеих сторон каждого элемента
Свойства элемента Flex
Есть 6 свойств проекта:
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
order
Определяет порядковый номер элемента; по умолчанию 0, который может быть отрицательным:
flex-basis
Базовое значение пространства главной оси, занимаемого элементом, до того, как гибкий элемент будет адаптивно увеличиваться и уменьшаться.
Значение по умолчанию — auto, то есть исходный размер элемента:
flex-grow
Обратите внимание, что это свойство указывает долю оставшегося пространства, разделенного проектом.Здесь есть два ключевых момента:
- У контейнеров должно оставаться место на главной оси
- Это свойство - это разделение оставшегося пространства, то есть окончательный размер элемента представляет собой размер Flex-базы каждого элемента, а также размер, полученный подразделением
По умолчанию стоит 0, то есть если осталось место, оно не будет увеличиваться (увеличиваться), и не может быть отрицательным:
flex-shrink:
Когда места недостаточно, в пропорции проекта по-прежнему есть два ключевых момента для уменьшения доли:
- Контейнеру не хватает места на главной оси для размещения всех элементов
- Недостаток места может привести к сжатию проекта, и это свойство представляет собой деление сокращающейся доли, то есть окончательный размер проекта представляет собой flex-базовый размер каждого элемента за вычетом сокращающейся доли, полученной от деления.
По умолчанию 1, т.е. элемент будет уменьшаться, если места не хватит, не может быть отрицательным:
flex
Сокращение для flex-grow, flex-shrink и flex-basis.
Значение по умолчанию «0 1 AUTO», I.E., есть два значения AUTO «1 1 AUTO», NOTE I.E. «0 0 AUTO».
align-self
Пусть один элемент имеет выравнивание по поперечной оси, отличное от других элементов, в основном используется для переопределения свойства align-items.
Значение по умолчанию — auto, то есть наследуется свойство align-items родительского элемента, при отсутствии родительского элемента эквивалентно растягиванию, другие значения имеют тот же эффект, что и align-items.
Суммировать
Гибкая компоновка также называется эластичной компоновкой.Лично так называемая «эластичность» в основном отражается в самомасштабировании элементов Flex. Самомасштабирование по главной оси в основном управляется flex-grow и flex-shrink, а самомасштабирование по поперечной оси отражается в значении по умолчанию для свойства align-*.
некоторые примечания
- Некоторые свойства не влияют на flex-элементы: свойства column-*, float и clear, vertical-align.
- Использование float во флекс-контейнере сделает флекс-макет недействительным.
Ссылаться на
Учебное пособие по гибкому макету