box.mdx

category	name	order	sourcePath	type	componentSignature
@threlte/flex	<Box>	1	packages/flex/src/lib/Box	component	props name type required order number false name type required description class string false declared classes will be resolved by a ClassParser declared on <Flex> name type required alignItems "Auto" | "FlexStart" | "Center" | "FlexEnd" | "Stretch" | "Baseline" | "SpaceBetween" | "SpaceAround" false name type required alignSelf "Auto" | "FlexStart" | "Center" | "FlexEnd" | "Stretch" | "Baseline" | "SpaceBetween" | "SpaceAround" false name type required alignContent "Auto" | "FlexStart" | "Center" | "FlexEnd" | "Stretch" | "Baseline" | "SpaceBetween" | "SpaceAround" false name type required justifyContent "FlexStart" | "Center" | "FlexEnd" | "SpaceBetween" | "SpaceAround" | "SpaceEvenly" false name type required flexDirection "Column" | "ColumnReverse" | "Row" | "RowReverse" false name type required flexWrap "NoWrap" | "Wrap" | "WrapReverse" false name type required flex number false name type required flexBasis number | "auto" | `${number}%` false name type required flexGrow number false name type required flexShrink number false name type required height number | "auto" | `${number}%` false name type required width number | "auto" | `${number}%` false name type required maxHeight number | `${number}%` false name type required maxWidth number | `${number}%` false name type required minHeight number | `${number}%` false name type required minWidth number | `${number}%` false name type required top number | `${number}%` false name type required right number | `${number}%` false name type required bottom number | `${number}%` false name type required left number | `${number}%` false name type required padding number | `${number}%` false name type required paddingTop number | `${number}%` false name type required paddingRight number | `${number}%` false name type required paddingBottom number | `${number}%` false name type required paddingLeft number | `${number}%` false name type required margin number | "auto" | `${number}%` false name type required marginTop number | "auto" | `${number}%` false name type required marginRight number | "auto" | `${number}%` false name type required marginBottom number | "auto" | `${number}%` false name type required marginLeft number | "auto" | `${number}%` false name type required gap number false name type required gapColumn number false name type required gapRow number false name type required aspectRatio number false

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"
    let:width
  >
    <Model {width} />
  </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 slot props

<Box
  let:width
  let:height
>
  <T.Mesh
    scale.x={width}
    scale.y={height}
  />
</Box>

• Using the useDimensions hook 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 reflow event

<Box
  on:reflow={({ 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 let:reflow>
  <Text text="Hello World" on:sync={reflow}>
</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>