关于 react flex布局怎么实际应用到组件的“行内样式”中（怎么实现最后一个图片的效果）

Question

问题遇到的现象和发生背景

用法和代码已经了解了

问题相关代码，请勿粘贴截图

  import React, { useState, useEffect } from 'react'
// import './04demo.css';
import axios from 'axios'
function Father() {
    //定义State为数组，setState是获得的数据
    const [Statearr, setStatearr] = useState([])//name
    const [countarr, setCountarr] = useState([])//username
    const [Emailarr, setEmailarr] = useState([])//email
    const [Addressarr, setAddressarr] = useState([])//address
    const [isName, setIsName] = useState(true)
    const [all, setall] = useState([])//data
    useEffect(() => {
        //fetch请求数据
        axios("https://jsonplaceholder.typicode.com/users")

            //fetch()返回一个promise，在.then方法里面处理，此时，我们还没有获得所需要的json格式的数据，
            //所以在response对象上调用.json()方法，这将返回另一个以json格式数据resolve的promise，所以fetch请求包含两个promise。
            // .then((res) => res.json())
            // .then(data => {
            //     console.log(data);

            //对于Axios，响应数据默认为JSON。响应数据在response对象的data属性上。
            .then(response => {
                console.log(response.data)
                let list1arr = response.data.map((post) => {
                    return post.name
                });
                let list2arr = response.data.map((post) => {
                    return post.username
                });
                let list3arr = response.data.map((post) => {
                    return post.email
                });
                let list4arr = response.data.map((post) => {
                    return post.address
                });
                //打印list
                console.log(list4arr)

                //将list赋值给setState
                setStatearr(list1arr)
                setCountarr(list2arr)
                setEmailarr(list3arr)
                setAddressarr(list4arr)
                setall(response.data)
            })
            //使用 catch() 去捕获错误
            .catch(err => console.log(err));

        document.body.style.backgroundColor =
            "#" + Math.floor(Math.random() * 16777215).toString(16);
    }, [])
    let xxx = isName ? Statearr : countarr
    // console.log(xxx)
    // console.log(Addressarr)

    //sortName函数，以及字符串的排序方法localeCompare
    const sortName = () => {
        const data = [...Statearr.sort((a, b) => a.localeCompare(b))];
        setStatearr(data);
    }
    //更改颜色
    // const [isClicked, setIsClicked] = useState(true);
    //   const changeToArbitraryColor = () => {
    //     document.body.style.backgroundColor =
    //       "#" + Math.floor(Math.random() * 16777215).toString(16);
    //     setIsClicked(!isClicked);
    //   };
    console.log(all)
    return (
        <div>
            {xxx.map(namearr => { return <Son value={namearr} key={namearr} /> })}
            <div >
                {all.map(all => {
                    return (<div key={all.id}
                        style={{
                            width: "100%",
                            height: "100%",
                            display: "flex",
          
                        }}
                    >
                        <a
                        style={{      flexgrow: 1}}
                        >名字：{all.name}</a>
                        <a
                         style={{      flexgrow: 1}}
                        >邮箱：{all.email}</a>
                        <a
                         style={{      flexgrow: 1}}
                        >城市：{all.address.city} </a>
                    </div>
                    )
                })
                }

                {/* {Addressarr.map(address => { return <div key={address.city}>{address.city} </div> })} */}
            </div>
            {Emailarr.map(Emailarr => { return <Son value1={Emailarr} key={Emailarr} /> })}
            <button onClick={() => { setIsName(!isName) }}>name更换username</button><hr />
            <button onClick={() => sortName()} >对name排序</button >
        </div>
    )
}
function Son(props) {
    return (
        <div>
            <div
                style={{
                    display: "flex",
                    flexDirection: "column",
                    backgroundColor: 'skyblue'
                }}>
                {/* {props.value} */}
            </div>
            <div style={{
                display: "flex",
                flexDirection: "column",
                backgroundColor: 'red'
            }}>
                {/* {props.value1} */}
            </div>

        </div>
    )
}
export { Father, Son }

我在a标签和div里面都试过，但都达不到我想要的效果
我用了flex-grow属性
flex-direction
justify-content
但是不知道怎么才能变成我想要的样式

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }

            .flexBox {
                display: flex;
                justify-content: space-between;
                background-color: aqua;
                height: 50px;
                margin: 10px;
            }

            .firstChild {
                align-self: flex-start
            }

            .secondChild {
                align-self: center;
            }

            .lastChild {
                align-self: flex-end;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="flexBox">
                <div class="firstChild">名字</div>
                <div class="secondChild">邮箱</div>
                <div class="lastChild">城市</div>
            </div>
            <div class="flexBox">
                <div class="firstChild">名字</div>
                <div class="secondChild">邮箱</div>
                <div class="lastChild">城市</div>
            </div>
            <div class="flexBox">
                <div class="firstChild">名字</div>
                <div class="secondChild">邮箱</div>
                <div class="lastChild">城市</div>
            </div>
        </div>
    </body>

</html>