在 div 中定位 inline-flex 元素答案

【问题标题】：Positioning inline-flex elements inside div在 div 中定位 inline-flex 元素
【发布时间】：2021-01-23 14:39:15
【问题描述】：

我试图在一个 div 中并排放置两个单独的元素，但第二个元素应该在 div 的右侧

<div className={classes.container}>
   <div className={classes.first}>
       First
   </div>
   <div className={classes.second}>
       Second
   </div>
<div>

我试图同时提供display: "inline-flex"，这将它们并排设置。然后我尝试使用flex: 1 将第二个div 移动到容器div 的右侧，但是第二个div 没有移动到任何地方。然后尝试也给容器 div justifyContent: "space-between" 并且也没有做任何事情。所以问题是如何将第二个 div 设置到容器 div 的右侧。

container: {
   justifyContent: "space-between"
},
first: {
   display: "inline-flex",
   flex: 1,
},
second: {
   display: "inline-flex"
},

任何想法如何将第二个 div 移动到容器 div 的右侧？

【问题讨论】：

标签： css flexbox material-ui

【解决方案1】：

需要在container 类中使用display:'flex'。 justify-content 适用于柔性显示。

container:{
  display:'flex'
}

然后first 和second div 将占用所需的空间/宽度并并排放置。
将它们分开使用justifyContent:'space-between' 或在container 类中使用justifyContent:'space-around'。另外，您可以分别指定first 和second div 的宽度。

【讨论】：

【解决方案2】：

container: {
   justifyContent: "space-between",
    display: "flex"
},
first: {
   display: "inline-flex",
   flex: 1,
},
second: {
   display: "inline-flex"
},

【讨论】：