Center of flex element is not aligned with parent object center.

[oveddan]

I want to be able to align items outside of a Flex element with the Flex element. However this seems challenging to do because the flex element itself has a center that is not aligned with the parent center.

Take this code, for example, viewable in this sandbox:

    <group position-z={-1}>
      <Flex flexDirection="row" alignItems="baseline">
        <Box>
          <mesh scale-y={1.5} >
            <meshBasicMaterial color="green" />
            <boxBufferGeometry />
          </mesh>
        </Box>
        <Box>
          <mesh>
            <meshBasicMaterial color="red" />
            <boxBufferGeometry />
          </mesh>
        </Box>
      </Flex>
      <mesh scale-y={1.5} >
        <meshBasicMaterial color="yellow"/>
        <planeBufferGeometry args={[2,2]} />
      </mesh>
    </group>

This results in:

I would expect the rendered plane to be center aligned both vertically and horizontally with the Flex element, but the horizontal alignment is off. Is there a recommended way to achieve this?

[saitonakamura]

@oveddan can you illustrate the result you're trying to achieve, cause i'm not entirely sure I understood you correctly? Although, I see at least one problem, you need to give Box a centerAnchor if children are the meshes/groups/or any threejs stuff (cause they use position as center, not top left), see the docs