Html 将flexbox中的元素左、中、右对齐

我正在尝试使用flexbox创建这个顶部标题

基本上，我想将

（机构1）与您看到的其他3个元素放在同一行的中心。（研究所所长、莱德尔和洛格·德）就像你在图片上看到的那样

.nav{
背景：#e1e1；
}
ol，ul{
列表样式：无；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
调整内容：灵活启动；
}
.标题标题{
证明内容：中心；
自对准：居中；
显示器：flex；
}
.nav ul li.注销{
左边距：自动；
}
李丽娜先生{
文字装饰：无；
填充：0px 20px；
字号：600；
}

机构1

如果您愿意更改html，则需要将标题中的所有项目放在DOM的同一级别上

这里有一个有效的例子

.nav{
背景：#e1e1；
列表样式：无；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
高度：60px；
}
.nav>div{
最小宽度：0；
空白：nowrap；
}
.标题标题{
弹性基准：80%；
文本对齐：居中；
}
.导航a组{
文字装饰：无；
填充：0px 20px；
字号：600；
}

机构1

使用嵌套的flex容器和

flex grow:1

这允许您在导航栏上创建三个等宽部分

然后，每个部分成为一个（嵌套的）flex容器，允许您使用flex属性垂直和水平对齐链接

现在，左侧和右侧项目固定到容器的边缘，中间项目完全居中（即使左侧和右侧项目的宽度不同）

.nav{
显示器：flex；
高度：50px；/*可选；仅用于演示*/
背景：白色；
}
.链接{
flex:1；/*缩写为：flex增长：1，flex收缩：1，flex基础：0*/
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
边框：1px红色虚线；
}
.标题标题{
弹性：1；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px红色虚线；
}
.注销{
弹性：1；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
边框：1px红色虚线；
}
.链接a{
利润率：0.5px；
文字装饰：无；
}

机构1

使用

调整内容：之间的空格如下所示：


.container{
显示器：flex；
证明内容：之间的空间；
}

A.
B
C
这是一个Flex解决方案，它可以在正确居中放置中间容器的同时对齐左右容器


。标题框{
宽度：100%；
显示器：flex；
柔性流：行换行；
填充顶部：50px；
}
.左收割台、.中收割台、.右收割台{
柔性：100px；/*如果需要，调整宽度*/
}
.标题框分区：第n个类型（1）{
文本对齐：左对齐；
}
.标题框分区：第n个类型（2）{
自对准：居中；
文本对齐：居中；
}
.标题框分区：第n个类型（3）{
文本对齐：右对齐；
}

左
标题
内容
中心
标题
内容
右
标题
内容
使用flexbox和当前的html结构是不可能的。Flexbox假设您正在对齐的元素处于同一级别（您在其中嵌套了菜单）Hi@KevinJantzer谢谢您的评论，那么您有什么建议？如果您愿意更改html，您需要将标题中的所有项目放在dom@DaniP抱歉，我以为JSFIDLE也会是一样的。没问题，如果有很多代码，但总是包含相关部分，JSFIDLE也可以作为一个提示。。。将删除我的评论谢谢！当窗口变小时，是否可以防止注销元素被包装成两行，而不是从标题中剪切空间？（当窗口足够宽时，保持标题完全居中）此方法的问题是中间项在容器中不居中。左右项目的宽度不同，导致空间不平衡。在这种情况下，中间的项目居中对齐。这里有一个例子：是的，我看到了：（下面的答案似乎是正确的解决方案：）但是如果A和C的宽度相同，heyThis只在容器中以B为中心。