Skip to content

Commit

Permalink
doc(Flex): fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
EldarMuhamethanov committed Jan 30, 2025
1 parent a7006ee commit d96c39f
Showing 1 changed file with 18 additions and 15 deletions.
33 changes: 18 additions & 15 deletions packages/vkui/src/components/Flex/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,28 @@

> ⚠️ Важно: в версиях браузеров `Chrome >= 87`, `Edge >= 87`, `Safari >= 14.1`, `Firefox >= 66`, `Opera >= 73` при использовании
> свойства `gap` используется нативное CSS свойство `gap`. В версиях браузеров ниже используется `fallback` логика с использование свойства `margin`.
>
>
> В связи с этим рекомендация по коду, если вы поддерживаете браузеры, которые не поддеживают `gap` на `flex` контейнерах:
>
>
> Избегайте использования React.Fragment в качестве `children`. Например следующий кейс будет работать некорректно - у него не сработает `gap`:
> ```jsx static
> <Flex gap="m">
> <React.Fragment>
> <div>1</div>
> <div>2</div>
> </React.Fragment>
> </Flex>
> ```
> Нужно чтобы у `Flex` было несколько непосредственных потомков
> ```jsx static
> <Flex gap="m">
>
> ```jsx static
> <Flex gap="m">
> <React.Fragment>
> <div>1</div>
> <div>2</div>
> </Flex>
> ```
> </React.Fragment>
> </Flex>
> ```
>
> Нужно чтобы у `Flex` было несколько непосредственных потомков
>
> ```jsx static
> <Flex gap="m">
> <div>1</div>
> <div>2</div>
> </Flex>
> ```
```jsx { "props": { "layout": false, "iframe": false } }
const FlexContainer = ({ itemsCount, ...props }) => {
Expand Down

0 comments on commit d96c39f

Please sign in to comment.