Гибкая компоновка\гибкая компоновка -- вопросы на собеседовании

предисловие

Традиционные решения для компоновки, основанные накоробочная модель,полагатьсяdisplayсвойство +positionсвойство +floatАтрибуты. Это очень неудобно для тех, кто особенно устроен, например,Центрировать по вертикалиЭтого нелегко достичь.

В 2009 году W3C предложил новую схему Flex layout, которая позволяет легко, полностью и быстро реализовать различные макеты страниц. В настоящее время он поддерживается всеми браузерами, а это значит, что теперь использовать эту функцию безопасно.

Написание Flex для распространенных макетов, все примеры делают кликиstatic.v gee.to/static/in...Для справки (измените указанный выше адрес на http при посещении, Nuggets принудительно использует https)

Интервьюер спросил: как ответить на гибкую планировку

1. Основные понятия:

Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».

(1) Основные понятия:

Контейнер по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (пересечение с границей) называетсяmain start, конечная позиция называетсяmain end; начальное положение поперечной оси называетсяcross start, конечная позиция называетсяcross end.

По умолчанию элементы располагаются вдоль главной оси. Пространство веретена, занимаемое одним изделием, называетсяmain size, пространство, занимаемое поперечной осью, называетсяcross size.

При коротком ответе: эластичный макет состоит из родительского контейнера и дочернего контейнера, а порядок дочерних элементов контролируется установкой основной оси и поперечной оси

2. Расскажите о свойствах родительского контейнера

Для контейнера заданы следующие 6 свойств.

flex-direction: row | row-reverse | column | column-reverse; Это свойство определяет направление расположения дочерних элементов

**flex-wrap: **nowrap | wrap | wrap-reverse; Это свойство называется «осью».

гибкий поток: || ; flex-directionа такжеflex-wrapсокращение для , по умолчаниюrow nowrap

justify-content:flex-start | flex-end | center | space-between | space-around; Это свойство определяет выравнивание дочерних элементов по главной оси.

align-items: flex-start | flex-end | center | baseline | stretch; Определяет, как элементы выравниваются по поперечной оси.

**align-content: ** flex-start | flex-end | center | space-between | space-around | stretch; Свойство определяет выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

На самом деле здесь можно ответить на атрибут родительского контейнера, а атрибуты дочернего элемента будут обсуждаться позже~~! , а затем укажите несколько случаев в конце, например, общие макеты, такие как вертикальный и горизонтальный центрирующий макет, фиксированный левый и правый адаптивный.

Ниже приведены некоторые подробные сведения, которые могут прочитать новички:

(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-flowсобственностьflex-directionсвойства иflex-wrapСокращение для свойства, по умолчаниюrow nowrap.

.box { flex-flow: || ; }

(4)свойство justify-content

justify-contentСвойство определяет выравнивание элемента по главной оси.

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

Точное выравнивание зависит от направления оси. Далее предполагается, что главная ось направлена слева направо.

flex-start(по умолчанию): по левому краю

flex-end: выравнивание по правому краю

center: центр

space-between: Оба конца выровнены с одинаковым интервалом между элементами.

space-around: равные интервалы с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей.

(5)Выровнять свойство

align-itemsСвойства определяют, как элементы выравниваются по поперечной оси.

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

Конкретное выравнивание связано с направлением поперечной оси.Следующее предполагает, что поперечная ось направлена сверху вниз.

flex-start: Начальная точка поперечной оси выровнена.

flex-end: Выровняйте конечную точку поперечной оси.

center: Выровняйте среднюю точку поперечной оси.

baseline: Базовое выравнивание первой строки текста элемента.

stretch(по умолчанию): если у элемента нет высоты или для него установлено значение auto, он заполнит всю высоту контейнера.

(6) атрибут align-content

align-contentСвойства определяют выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start: Выровнять по начальной точке поперечной оси.
flex-end: Выровнять по конечной точке поперечной оси.
center: Выровняйте по средней точке поперечной оси.
space-between: Выровняйте по обоим концам поперечной оси, и расстояние между осями будет равномерно распределено.
space-around: Расстояние с обеих сторон каждой оси одинаковое. Следовательно, расстояние между осями в два раза больше, чем расстояние между осями и рамой.
stretch(по умолчанию): ось заполняет всю поперечную ось.

Пример изображения: (Эта часть более сложна для понимания и требует ручного написания кода, чтобы попрактиковаться в работе)

3. Расскажите о свойствах дочернего контейнера

Шесть свойств задаются для дочерних элементов или контейнеров.

Гибкая компоновкаПодэлемент, подконтейнер, элемент, элемент говорят, что подконтейнер концепта

order

flex-grow

flex-shrink

flex-basis

flex

align-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

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. Резюме

Вопросы об эластичном макете не должны отвечать на эти четыре вопроса: основные понятия, свойства родительского контейнера, свойства дочернего контейнера, общие случаи.

Поскольку существует много распространенных случаев эластичной компоновки, я позже напишу общий вариант эластичной компоновки.