css 将右框内容设置为带flex的右侧[复制]

acruukt9 于 2022-12-05 发布在其他

关注(0)|答案(2)|浏览(132)

此问题在此处已有答案：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?（6个答案）
How to Right-align flex item?（13个答案）
去年关闭了。
我有一个div，它有两个子div，现在我想要是

1.对于右侧子项，它应该在最右侧显示文本。
1.对于左边的子项，其内容应该是直到右边内容为止的完整长度。
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

"我是怎么得到它的“

css

来源：https://stackoverflow.com/questions/70062348/set-right-box-content-to-right-with-flex

2条答案

按热度按时间

3mpgtkmj1#

您可以使用justify-content: space-between;来获得所需的效果。
点击此处了解更多信息。
第一个
编辑：
我认为您希望移动的设备不要在行间断字，例如：

Roosevelt           1.2
Collection        miles

而是在一行中。
您需要做的是将white-space属性与nowrap沿着使用。
第一个

赞(0）回复(0）举报 2022-12-05

h79rfbju2#

添加此CSS代码：

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

说明：
Flex提供了一个布局，它与其他属性一起可以帮助您创建所需的布局。我们将flex-direction设置为row，因为我们希望两个元素都在一行中;将justify-content设置为space-between，因为它设置了行元素之间可用的最大间距。

赞(0）回复(0）举报 2022-12-05

我来回答

css 将右框内容设置为带flex的右侧[复制]

2条答案

相关问题

热门标签

最新问答