如何在不更改其宽度的情况下将元素推到flexbox的结束

发布于 2025-02-13 01:40:40 字数 966 浏览 0 评论 0原文

我将一些跨度放在Mat-Toolbar中，默认情况下具有显示flex。现在，我想要极右边的一些物品。我使用保证金左：这些元素的自动。问题在于，这些元素是拉伸的，以填充整个Flexbox。我想要的是一些元素，然后是空白空间，然后是libgin-left：auto具有其宽度为fit-content的元素。

我想要的：

我得到的：

这是我的代码：

html：

<div>
  <span>Flex item</span>
  <span class="right">Flex item</span>
  <span class="right">Flex item</span>
</div>

css：

div {
     display: flex;
     border: 1px dotted black;
        }
        
.right { margin-left: auto; }

span {
  background-color: #E0E0E0;
  border: solid 1px black;
  padding: 10px
}

原文

I am placing some spans inside mat-toolbar which by default has display flex. Now I want some of the items on the extreme right. I use margin-left: auto for these elements. The problem is that these elements are stretched in order to fill the entire flexbox. What I want is some elements, followed by empty space, followed by the elements with margin-left: auto having their width as fit-content.

What I want :

What I'm getting:

This is my code:

HTML:

<div>
  <span>Flex item</span>
  <span class="right">Flex item</span>
  <span class="right">Flex item</span>
</div>

CSS:

div {
     display: flex;
     border: 1px dotted black;
        }
        
.right { margin-left: auto; }

span {
  background-color: #E0E0E0;
  border: solid 1px black;
  padding: 10px
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黯然 2025-02-20 01:40:40

根据您所说的话，我知道您想要这样的东西...
使用Flexbox是实现它的正确方法，但是您必须添加一些属性以使其按照所需的方式使其样式。

使用：

合理性：之间的空格>将项目对齐到极端（左右）；
对齐项目：中心垂直对齐中心，您在HTML上的信息。
创建2个Divs将两个divs与极端对齐。

这是一个例子：

body {
  margin: 0px;
}

div {
  box-sizing: border-box;
}

.toolbar {
  background-color: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: white;
  padding: 0px 10px;
}

.start-items {
  display: flex;
  gap: 15px;
}

.multiple-items {
  display: flex;
  gap: 15px;
}

<div class="toolbar">
  <div class="start-items">
    <h5>
      Start Item1
    </h5>
    <h5>
      Start Item2
    </h5>
  </div>
  <div class="multiple-items">
    <h5>
      Item1
    </h5>
    <h5>
      Item2
    </h5>
    <h5>
      Item3
    </h5>
  </div>
</div>

Based on what you said, I understood you wanted something like this...
Using flexbox is the correct way to achieve it, but you must add some properties to make it style the way you want.

Use:

justify-content: space-between to align the items into the extremes (left and right);
align-items: center to align vertically to the center, your information on HTML.
Create 2 divs to align both divs to the extremes.

Here is the example:

body {
  margin: 0px;
}

div {
  box-sizing: border-box;
}

.toolbar {
  background-color: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: white;
  padding: 0px 10px;
}

.start-items {
  display: flex;
  gap: 15px;
}

.multiple-items {
  display: flex;
  gap: 15px;
}

<div class="toolbar">
  <div class="start-items">
    <h5>
      Start Item1
    </h5>
    <h5>
      Start Item2
    </h5>
  </div>
  <div class="multiple-items">
    <h5>
      Item1
    </h5>
    <h5>
      Item2
    </h5>
    <h5>
      Item3
    </h5>
  </div>
</div>

回复收藏 0 原文

~没有更多了~