我正在用react,html和css设计我的主页的页眉,在页眉中我有一个button和一个h2标签,每个标签都在不同的div标签中,我对这些元素应用display:flex,然后用justify-content属性移动它们。
在我有按钮的div中,我有属性:理由内容:end,它把它放在它的末尾,这很好,但是在我有h2标签的div中,我把justify-content放在:start,但是没有把它放在div标签的开头,为什么会这样,我该怎么办?
"从" ../../hooks/useBlockchain "导入{useBlockchain};导入'./EncabezadoHome.css'
导出常量EncabezadoHome =()=〉{
const {wallet, web3Provider, connectWallet} = useBlockchain();
return (
<header>
<div className={"container-header-home"}>
<div className={"logo-header-home"}>
<h2>Emprendamos</h2>
</div>
<div className={"button-header-home"}>
<button onClick={connectWallet}>Conectar Wallet</button>
</div>
</div>
</header>
);
};
'
EncabezadoHome.css:
.container-header-home {
display: flex;
padding-top: 20px;
}
.logo-header-home {
display: flex;
flex: 1;
justify-content: start;
}
.logo-header-home h2 {
padding-left: 20px;
color: white;
}
.button-header-home {
display: flex;
flex: 1;
justify-content: end;
padding-right: 20px;
}
.button-header-home button {
color: #ffffff;
background-color: #1D9BF0;
width: 200px;
height: 50px;
border-radius: 10px;
}
3条答案
按热度按时间efzxgjgh1#
正确的语法是flex-end和flex-start。您尝试实现什么效果,除了此之外还有其他选项,如空格。
ezykj2lf2#
我也测试过了,看起来效果不错。你可以从这张图片中看到通过开发工具添加了flex-box轮廓的布局:
我试着按照下面的方式编写CSS,看看是否有什么不同。我将填充移到h2元素的容器div中,以匹配按钮容器,并更新了flexbox术语。
qqrboqgw3#
我已经解决的问题是,在index.css文件中,我有这个: