m0_62452255 2022-04-27 14:05 采纳率: 85.7%
浏览 22
已结题

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

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

用法和代码已经了解了

问题相关代码,请勿粘贴截图
  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
但是不知道怎么才能变成我想要的样式

运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果

img

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-27 14:26
    关注
    
    <!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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 5月5日
  • 已采纳回答 4月27日
  • 创建了问题 4月27日

悬赏问题

  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 运行qteasy报错
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题
  • ¥15 企业消防水炮塔设计方案
  • ¥20 WORKBENCH网格划分
  • ¥60 急招师兄远程解决下载NPCAP的BUG!
  • ¥15 关于#51单片机#的问题:51单片机LM1602的数据只能显示一个字符,在使用矩形键盘送数据的时候不能显示出来而是在显示初始位置上,达不到密码锁的效果