Прежде чем изучать гибкую верстку, как мы расположили следующие четыре блока в ряд? Мы могли бы использовать поплавки, позиционирование и т.д. Когда мы его используем, мы чувствуем себя очень хлопотно, и нам нужно отрегулировать интервал, измерить расстояние и т. д. Однако, изучив раскладку felx, мы легко решим эти проблемы.
1. Что такое гибкая верстка?
В 2009 году W3C предложила новую программу — макет Flex может быть простым, полным и адаптивным для достижения различных макетов страниц. В настоящее время он поддерживается всеми браузерами, а это значит, что теперь использовать эту функцию безопасно.
Flex — это аббревиатура от Flexible Box, что означает «гибкая компоновка», которая используется для обеспечения максимальной гибкости блочной модели.
2. Базовый синтаксис flex
Принципиальная схема гибкой верстки:
Контейнер по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (пересечение с границей) называетсяmain start, конечная позиция называетсяmain end; начальное положение поперечной оси называетсяcross start, конечная позиция называетсяcross end，По умолчанию элементы располагаются вдоль главной оси. Пространство веретена, занимаемое одним изделием, называетсяmain size, пространство, занимаемое поперечной осью, называетсяcross size.
Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «элементами».
(1) Свойство flex-direction определяет направление главной оси (то есть направление расположения элементов).
.box { flex-direction: row | row-reverse | column | column-reverse; }
-
row(по умолчанию): основная ось горизонтальна, а начальная точка находится на левом конце. -
row-reverse: главная ось находится в горизонтальном направлении, а начальная точка находится в правом конце. -
column: главная ось находится в вертикальном направлении, а начальная точка находится на верхнем краю. -
column-reverse: главная ось вертикальна, а начальная точка находится на нижнем краю.
(2) свойство flex-wrap
По умолчанию элементы располагаются на линии (она же «ось»).flex-wrapОпределение атрибута, как свернуть, если одна ось не подходит.
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap (по умолчанию): не переносить
- wrap: перенос, первая строка выше
- wrap-reverse: перенос, первая строка ниже
(3) гибкий поток
flex-flowсобственностьflex-directionсвойства иflex-wrapСокращение для свойства, по умолчаниюrow nowrap.
.box { flex-flow: || ; }
(4) атрибут выравнивания содержимого
justify-contentСвойство определяет выравнивание элемента по главной оси.
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
Может принимать 5 значений, а конкретное выравнивание связано с направлением оси. Далее предполагается, что главная ось направлена слева направо.
flex-start(по умолчанию): по левому краюflex-end: выравнивание по правому краюcenter: центрspace-between: Оба конца выровнены с одинаковым интервалом между элементами.space-around: равные интервалы с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей.
(5) атрибут align-items
align-itemsСвойства определяют, как элементы выравниваются по поперечной оси.
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
Может принимать 5 значений. Конкретное выравнивание связано с направлением поперечной оси.Следующее предполагает, что поперечная ось направлена сверху вниз.
flex-start: Начальная точка поперечной оси выровнена.flex-end: Выровняйте конечную точку поперечной оси.center: Выровняйте среднюю точку поперечной оси.baseline: Базовое выравнивание первой строки текста элемента.stretch(по умолчанию): если элемент не имеет высоты или установлен автоматически, он будет заполнять всю высоту контейнера.
(6) атрибут align-content
align-contentСвойства определяют выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
Это свойство может принимать 6 значений.
flex-start: Выровнять по начальной точке поперечной оси.flex-end: Выровнять по конечной точке поперечной оси.center: Выровняйте по средней точке поперечной оси.space-between: Выровняйте по обоим концам поперечной оси, и расстояние между осями будет равномерно распределено.space-around: Расстояние с обеих сторон каждой оси одинаковое. Следовательно, расстояние между осями в два раза больше, чем расстояние между осями и рамой.stretch(по умолчанию): ось заполняет всю поперечную ось.
3. Свойства проекта
Для элемента заданы следующие 6 свойств.
orderflex-growflex-shrinkflex-basisflexalign-self
(1) атрибут заказа
orderСвойство определяет порядок сортировки элементов. Чем меньше значение, тем выше рейтинг, по умолчанию 0.
.item { order: ; }
(2) свойство гибкого роста
flex-growСвойство определяет увеличение элемента, по умолчанию0, то есть если осталось место, оно не увеличивается.
.item { flex-grow: ; /* default 0 */ }
если все предметыflex-growоба свойства равны 1, они будут поровну делить оставшееся пространство (если оно есть). Если проектflex-growЕсли свойство равно 2, а остальные элементы равны 1, оставшееся пространство, занимаемое первым, будет в два раза больше, чем другие элементы.
(3) свойство flex-shrink
flex-shrinkСвойство определяет коэффициент уменьшения элемента, по умолчанию равен 1, то есть если места недостаточно, элемент будет уменьшен.
.item { flex-shrink: ; /* default 1 */ }
если все предметыflex-shrinkВсе атрибуты равны 1, и когда места недостаточно, они будут пропорционально уменьшены. Если проектflex-shrinkАтрибут равен 0, а все остальные элементы равны 1. Когда места недостаточно, первый не будет уменьшаться.
Отрицательные значения недопустимы для этого свойства.
(4) свойство гибкости
flex-basisСвойство определяет основной размер, который занимает элемент перед выделением лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчаниюauto, что является исходным размером элемента.
.item { flex-basis: | auto; /* default auto */ }
Он может быть настроен на следованиеwidthилиheightПри одинаковом значении свойства (например, 350 пикселей) элемент будет занимать фиксированное пространство.
(5) свойство гибкости
flexсобственностьflex-grow, flex-shrinkа такжеflex-basisсокращение для , по умолчанию0 1 auto. Последние два свойства являются необязательными.
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
Это свойство имеет два сокращенных значения:auto (1 1 auto) и нет (0 0 auto).
Рекомендуется использовать это свойство, а не писать три отдельных свойства, потому что браузер выведет соответствующее значение.
(6) атрибут align-self
align-selfАтрибут позволяет одному элементу иметь выравнивание, отличное от других элементов, может быть переопределеноalign-itemsАтрибуты. По умолчаниюauto, что означает наследование от родительского элементаalign-itemsатрибут, если нет родительского элемента, он эквивалентенstretch.
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
Это свойство может принимать 6 значений, кроме auto, остальные точно такие же, как и свойство align-items.
4. Пример проекта
пример 1:
Наш код до этого эффекта выглядит так:
Того же эффекта можно добиться с помощью гибкой верстки.
Если страница более сложная, использование гибкого макета может помочь нам лучше соответствовать требованиям, а гибкий макет также широко используется на мобильных страницах.
Пример 2:
Читатели могут подумать о значении flex: 20%, об этой строке кода и о том, почему она написана именно так.
Нелегко писать заметки, просто ставь лайк и передай любовь. хахахахаха
Статья заимствована у учителя Жуань Ифэн:Уууу. Руан Ифэн.com/blog/2015/0…