<Box>
The component <Box> creates a flexbox item. It can be used as a direct child
of <Flex> or as a child of another <Box> to
create a nested flex layout.
<script lang="ts"> import { Flex, Box } from '@threlte/flex' import Model from './Model.svelte'</script>
<Flex width={100} height={100} justifyContent="Center"> <Box flex={1} width="auto" > {#snippet children({ width })} <Model {width} /> {/snippet} </Box></Flex>Content Sizing
Section titled “Content Sizing”The <Box> component controls element positions only. However, if you wish to
handle element dimensions based on the layout calculated by Yoga, you’ll need to
manually adapt the content’s size. This is because @threlte/flex lacks
knowledge about the inner content’s sizing mechanisms. For this purpose,
@threlte/flex offers the computed dimensions in three ways:
- Using the
widthandheightsnippet props
<Box> {#snippet children({ width, height })} <T.Mesh scale.x={width} scale.y={height} /> {/snippet}</Box>- Using the
useDimensionshook in a child component to<Box>:
<script lang="ts"> import { useDimensions } from '@threlte/flex' const { width, height } = useDimensions()</script>
<T.Mesh scale.x={$width} scale.y={$height}/>- Using the
reflowevent
<Box onreflow={({ width, height }) => { console.log(width, height) }}> <!-- … --></Box>Layout Reflow
Section titled “Layout Reflow”To trigger a layout reflow, you can use the reflow slot prop:
<script lang="ts"> import { Box } from '@threlte/flex' import { Text } from '@threlte/extras'</script>
<Box> {#snippet children({ reflow })} <Text text="Hello World" onsync={reflow}> {/snippet}</Box>Item Ordering
Section titled “Item Ordering”By default, the order of a flex item is determined by the order of insertion in
the component tree. If for any reason you need to change the order of a flex
item manually, you can use the order prop:
<script lang="ts"> import { Box } from '@threlte/flex'</script>
<Flex width={100} height={100}> <Box order={2} /> <Box order={1} /> <Box order={3} /></Flex>