Компонент Flex в WordPress предоставляет гибкий способ создания адаптивных компоновок с использованием Flexbox. Он позволяет выравнивать дочерние элементы по горизонтали или вертикали и управлять расстоянием между ними. Flex часто используется для создания горизонтальных и вертикальных контейнеров с помощью дочерних компонентов FlexItem и FlexBlock.
Основное использование компонента Flex
Компонент Flex и его дочерние компоненты FlexItem и FlexBlock позволяют создавать сложные и адаптивные макеты в React-приложениях WordPress. В следующем примере компонент Flex располагает элементы в строку, выравнивая их по центру.
import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
function Example() {
return (
<Flex>
<FlexItem>
<p>Код</p>
</FlexItem>
<FlexBlock>
<p>Поэзия</p>
</FlexBlock>
</Flex>
);
}
В этом примере элемент FlexItem отображает текст «Код», а элемент FlexBlock — текст «Поэзия». FlexBlock занимает оставшееся пространство внутри Flex, в то время как FlexItem занимает пространство по своему содержимому.
Описание Props для Flex
Компонент Flex поддерживает несколько параметров для управления компоновкой и выравниванием содержимого. Рассмотрим каждый из них подробно.
1. align: CSSProperties['alignItems']
Свойство align управляет выравниванием дочерних элементов по оси, перпендикулярной направлению Flex.
- Тип:
CSSProperties['alignItems'] - Обязательный: Нет
- Значение по умолчанию:
center
<Flex align="start"> <FlexItem>Первый элемент</FlexItem> <FlexItem>Второй элемент</FlexItem> </Flex>В этом примере дочерние элементы будут выровнены по началу оси.
2. direction: ResponsiveCSSValue<CSSProperties['flexDirection']>
Свойство direction задает направление размещения дочерних элементов. Значение column выстраивает их вертикально, а row — горизонтально.
- Тип:
ResponsiveCSSValue<CSSProperties['flexDirection']> - Обязательный: Нет
- Значение по умолчанию:
row
<Flex direction="column"> <FlexItem>Элемент 1</FlexItem> <FlexItem>Элемент 2</FlexItem> </Flex>Этот пример располагает элементы вертикально.
3. expanded: boolean
Свойство expanded указывает, должен ли контейнер занимать доступную ширину (для горизонтальной компоновки) или высоту (для вертикальной).
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
true
<Flex expanded={false}> <FlexItem>Элемент 1</FlexItem> <FlexItem>Элемент 2</FlexItem> </Flex>Здесь контейнер Flex не будет растягиваться до максимальной ширины.
4. gap: number
Свойство gap определяет расстояние между дочерними элементами. Значение gap умножается на базовую единицу (4px).
- Тип:
number - Обязательный: Нет
- Значение по умолчанию:
2
<Flex gap={4}> <FlexItem>Элемент 1</FlexItem> <FlexItem>Элемент 2</FlexItem> </Flex>Здесь расстояние между элементами увеличено, так как gap установлен на 4.
5. justify: CSSProperties['justifyContent']
Свойство justify управляет выравниванием дочерних элементов вдоль основного направления.
- Тип:
CSSProperties['justifyContent'] - Обязательный: Нет
- Значение по умолчанию:
space-between
<Flex justify="center"> <FlexItem>Элемент A</FlexItem> <FlexItem>Элемент B</FlexItem> </Flex>В данном случае элементы будут выровнены по центру.
6. wrap: boolean
Свойство wrap указывает, нужно ли переносить дочерние элементы на новую строку, если они не помещаются в одну строку.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
<Flex wrap={true}> <FlexItem>Элемент 1</FlexItem> <FlexItem>Элемент 2</FlexItem> <FlexItem>Элемент 3</FlexItem> </Flex>При включенном wrap элементы будут переноситься на следующую строку, если ширины контейнера недостаточно.
Пример 1: Горизонтальное выравнивание элементов
Использование компонента Flex с горизонтальным выравниванием и увеличенным отступом между элементами.
import { Flex, FlexItem } from '@wordpress/components';
const HorizontalFlexExample = () => (
<Flex direction="row" gap={6} justify="space-around">
<FlexItem>Элемент 1</FlexItem>
<FlexItem>Элемент 2</FlexItem>
<FlexItem>Элемент 3</FlexItem>
</Flex>
);
Здесь элементы будут расположены горизонтально с отступом и равномерно распределены.
Пример 2: Вертикальное выравнивание с центровкой
В этом примере элементы располагаются вертикально и выравниваются по центру.
import { Flex, FlexItem } from '@wordpress/components';
const VerticalFlexExample = () => (
<Flex direction="column" align="center" gap={4}>
<FlexItem>Верхний элемент</FlexItem>
<FlexItem>Нижний элемент</FlexItem>
</Flex>
);
Элементы будут расположены по центру вертикально.
Пример 3: Компоновка с использованием FlexBlock
FlexBlock используется, чтобы элемент занимал оставшееся доступное пространство.
import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
const FlexWithBlockExample = () => (
<Flex direction="row" align="start">
<FlexItem>Элемент слева</FlexItem>
<FlexBlock>Элемент, занимающий оставшееся пространство</FlexBlock>
</Flex>
);
В этом примере FlexBlock расширяется и занимает оставшееся пространство в контейнере.
Пример 4: Растягивание с помощью expanded
Свойство expanded можно использовать для полного растягивания контейнера.
import { Flex, FlexItem } from '@wordpress/components';
const ExpandedFlexExample = () => (
<Flex expanded={true} direction="column" gap={3}>
<FlexItem>Элемент 1</FlexItem>
<FlexItem>Элемент 2</FlexItem>
</Flex>
);
Контейнер Flex растягивается по всей высоте, если направление установлено в column.
Заключение
Компонент Flex — мощный инструмент для создания адаптивных интерфейсов с гибкой компоновкой элементов. С помощью параметров, таких как align, direction, gap, justify, и wrap, вы можете легко контролировать расположение и расстояние между элементами, адаптируя макет к потребностям приложения.