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

Usage

<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

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 width and height snippet props

<Box>
  {#snippet children({ width, height })}
    <T.Mesh
      scale.x={width}
      scale.y={height}
    />
  {/snippet}
</Box>

• Using the useDimensions hook in a child component to <Box>:

Child.svelte

<script lang="ts">
  import { useDimensions } from '@threlte/flex'
  const { width, height } = useDimensions()
</script>

<T.Mesh
  scale.x={$width}
  scale.y={$height}
/>

• Using the reflow event

<Box
  onreflow={({ width, height }) => {
    console.log(width, height)
  }}
>
  <!-- … -->
</Box>

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

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>