css - 使用 flexbox 固定位置

Question

我在理解具有位置固定 div 的 flexbox 的行为时遇到了一些问题。

我试图让我的导航保持在底部，但保留我使用的 flex 样式。

基本上，图标需要沿着一行均匀分布，并留有一点边距，以便向左和向右拉动。

这绝对没问题，但是一旦应用位置固定，底部 0 图标就会在屏幕左下角被挤压在一起，有人可以解释一下。

const FooterNav = () => { 
 return (
    <div className="FooterNave__div">
      <HomeIcon />
      <SearchOutlinedIcon />
      <LocalHospitalOutlinedIcon />
      <FavoriteBorderOutlinedIcon />
      <PersonOutlineOutlinedIcon />
    </div> 
 );
};
<footer className="app__footer">
        <FooterNav />
      </footer>

.app__footer {  
    margin: 0 4vw;
}

.FooterNave__div {  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

标签： cssreactjsflexboxmaterial-uicss-position