how can i set a css property to a div only when it has only one child?

Try this way

function Parent() {
    const orders = [] //some array of objects
    return (
        <Cards itemsCount={orders.length}> // item count prop here
            {orders.map((order, index) => {
                return (
                    <Card order={order} />
                );
            )}}
        </Cards>
    );
}


const Cards = styled.div`
    justify-content: ${props => (props.itemsCount == 1 ? "centre" : "flex-start")};
    display: flex;
    flex-wrap: wrap;
    min-height: calc(${256 * 1.5});
    padding: 0 calc(50vw - 600px);
    @media screen and (max-width: 1320px) {
        width: 100vw;
        padding: 0 calc(50vw - 400px);
    }
`;