使用 flex 将右框内容设置为右侧 [重复]

Posted 2023-03-05

【中文标题】使用 flex 将右框内容设置为右侧 [重复]

【英文标题】：Set right box content to right with flex [duplicate]

【发布时间】：2021-12-31 20:26:23

【问题描述】：

我有一个有 2 个子 div 的 div，现在我想要的是

对于右孩子，它应该在最右侧显示文本。 对于左边的孩子，它的内容应该是完整的，直到右边的内容。

div 是

<div class="FindInStoreLocation__store">
  <div class="FindInStoreLocation__store__name">
    <span class="Text-ds">Roosevelt Collection</span>
  </div>
  <div class="FindInStoreLocation__store__distance">
    <span class="Text-ds">1.2 miles</span>
  </div>
</div>

如何使用 flex 编写它的 Css，以便我可以在一行中看到内容，例如：

Roosevelt Collection.           1.2 miles

我是怎么理解的

【参考方案1】：

您可以使用justify-content: space-between; 来获得所需的效果。

阅读更多相关信息here。

.FindInStoreLocation__store

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border: 1px solid black;

<div class="FindInStoreLocation__store">
  <div class="FindInStoreLocation__store__name">
    <span class="Text-ds">Roosevelt Collection</span>
  </div>
  <div class="FindInStoreLocation__store__distance">
    <span class="Text-ds">1.2 miles</span>
  </div>
</div>

编辑：

我认为您希望移动设备不要断行 喜欢：

Roosevelt           1.2
Collection        miles

而是在一行本身。

您需要做的是使用white-space 属性值nowrap 以及overflow: hidden。

.FindInStoreLocation__store

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;

<div class="FindInStoreLocation__store">
  <div class="FindInStoreLocation__store__name">
    <span class="Text-ds">Roosevelt Collection</span>
  </div>
  <div class="FindInStoreLocation__store__distance">
    <span class="Text-ds">1.2 miles</span>
  </div>
</div>

【讨论】：

但是移动端的文本Roosevelt Collection 仍然在两行中，我需要在一行中。

@AshwaniPanwar，您是否尝试通过单击运行按钮来运行上述代码 sn-p？它应该可以正常工作 - 也许您应该使用您尝试运行的确切代码编辑帖子（必须有所不同）。另外，您尝试了哪种浏览器？请使用更多详细信息编辑问题。

感谢@kiner，使用 chrome，但对于移动设备，它在 2 行中。

请编辑问题并包括你得到的行为和你期望的行为。

@AshwaniPanwar，我已经编辑了我的答案，请检查。

【参考方案2】：

添加此 CSS 代码：

.FindInStoreLocation__store
    display: flex;
    justify-content: space-between;

【讨论】：

没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。

但在移动设备中仍然会收到两行文字Roosevelt Collection，我需要一行。

@AshwaniPanwar 添加这个 CSS：flex-direction: row 它将元素放在一行中