当前位置: 首页 > 知识库问答 >
问题:

在flex容器的整个宽度上对齐内部Flexbox项目

颜英博
2023-03-14

我有一个用于标题导航的Flexbox,徽标向左对齐,ul项目向右对齐,就像传统样式一样。徽标和导航链接都是全宽Flexbox中的flex项目,我给了它们两个flex:50%。导航链接部分也是一个Flexbox(内部Flexbox),用于防止菜单堆叠,而不是以更好的响应方式运行。

当我将“对齐内容”应用于该内部Flexbox时,链接没有任何更改,就好像存在替代样式或该属性在内部文本框上不起作用一样。我希望导航链接在屏幕宽度的50%之间平均分配。

我曾尝试过将flex:auto放置在项目上,但无法通过这样做将其保持在当前布局中,我还尝试过摆弄内联元素,以查看是否可以删除任何覆盖属性,但不能删除。

#nav {
    display: flex;
    flex: 50%;
    align-items: center;
}

#logo {
    margin-right: auto;
    width: 50px;
    height: auto;
}

#links {
    margin-left: auto;
    display: flex;
    justify-content: space-between;
}

#links a {
    text-decoration: none;
}
<nav id="nav">
	<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
	<ul id="links">
		<li><a href="#">Link1<a></li>
		<li><a href="#">Link2<a></li>
		<li><a href="#">Link3<a></li>
		<li><a href="#">Link4<a></li>
	</ul>
</nav>

共有2个答案

濮彬
2023-03-14

我认为你在flex:50%方面有问题 CSS减速。它不在合适的地方。我已经重新编写了html以正确使用它,并根据需要修复了CSS。

这是修改后的CSS

 #nav {
            display: flex;
            background: #eee;
        }

        #nav>#logo,
        #nav>#links {
            flex: 50%;
        }
        #logo img {
            width: 50px;
            height: auto;
        }

        #links {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
        }

        #links a {
            text-decoration: none;
        }
 <nav id="nav">
        <div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
        <ul id="links">
            <li><a href="#">Link1<a></li>
            <li><a href="#">Link2<a></li>
            <li><a href="#">Link3<a></li>
            <li><a href="#">Link4<a></li>
        </ul>
    </nav>

代码也可在coDepenhttps://codepen.io/mobarak/pen/jRjZxB/

贺栋
2023-03-14

你很接近。我所做的重要更改是设置#链接的宽度

#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo {
  width: 50px;
  flex: 0 0 50px;
}

#links {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

#links a {
  text-decoration: none;
}
<nav id="nav">
	<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
	<ul id="links">
		<li><a href="#">Link1</a></li>
		<li><a href="#">Link2</a></li>
		<li><a href="#">Link3</a></li>
		<li><a href="#">Link4</a></li>
	</ul>
</nav>

 类似资料:
  • 我这里有这个代码: 如您所见,第二列和第三列前面有一些空白。 有没有办法摆脱这个问题?

  • 我发现CSS Flexbox属性中的和之间的差异非常令人困惑。我已经在网上看了几个小时的文档和几个例子,但我仍然不能完全掌握它。 更准确地说,对我来说,对齐项对我来说是完全有意义的,它的行为是完全清楚的。另一方面,一点也不清晰。特别是,我不明白为什么我们应该根据内容是一行还是多行使用两种不同的属性。 用外行的话来解释是什么?

  • 问题内容: 我有应该根据内容动态更改高度的容器。对于给定行中的所有容器,无论每个容器的内容如何,​​底部文本都应固定在底部。 我认为与一起使用可以将其推到最低点,但似乎没有任何作用。 问题答案: 您需要使父级成为flex容器: 然后,告诉元素填充可用高度:

  • 我想知道是否有一种有效的方法来对齐不同的灵活项目(!)div flex容器,使flex项具有相同的宽度,如下所示: 笔记: 我必须在一个循环中呈现flex div(这是引导警报),一个接一个(因此只有在最后才清楚应用于水平对齐列的宽度) 这是一个简化的例子。实际上,弹性项包含不同的长度 这是在不进行自定义宽度计算的情况下呈现弹性项的方式: 也许有一个“开箱即用”的功能,它以一种不太“粗俗”的方式处

  • 我有一个全视区宽度,全视区高度的“英雄形象”在一个主页。我做了一个柔性容器。flex容器中有一个子div(包含一个标题)。此flex项目应与flex容器的底部对齐。它有一个最大宽度,应该在父级内部水平居中。 但是,max-width将被忽略。div取其内容的宽度--标题。请参阅JS Fiddle:https://jsfidle.net/4h7q6d5x/ 正如您所看到的,英雄图像内部的.main