Vaadin 23中按钮布局对齐失效及垂直对齐问题求助

一、水平分布问题的核心原因 #

你混淆了Flex布局的主轴（水平方向）和交叉轴（垂直方向）对齐属性：setAlignSelf是用来单独设置子元素在垂直方向的对齐方式，而非控制水平位置，所以你的代码无法实现按钮左、中、右的水平分布。

二、修正水平分布的两种方法 #

方法1：用SPACE_BETWEEN快速实现（推荐）

通过设置HorizontalLayout的主轴对齐模式，让第一个按钮左对齐、最后一个右对齐，中间按钮自动居中：

HorizontalLayout bottomLayout = new HorizontalLayout();
bottomLayout.setWidthFull();
bottomLayout.setHeight("82px");
// 设置水平方向两端对齐，中间元素自动居中
bottomLayout.setJustifyContentMode(JustifyContentMode.SPACE_BETWEEN);
bottomLayout.add(buttonA, buttonB, buttonC);

方法2：添加弹性占位组件（精确控制）

如果需要更灵活的布局调整，可以在按钮之间插入空白组件并设置自动扩展，强制按钮定位到目标位置：

HorizontalLayout bottomLayout = new HorizontalLayout();
bottomLayout.setWidthFull();
bottomLayout.setHeight("82px");
// 按顺序添加按钮和占位组件
bottomLayout.add(buttonA, new HorizontalLayout(), buttonB, new HorizontalLayout(), buttonC);
// 让中间的占位组件自动占满剩余空间，挤压按钮到左、中、右
bottomLayout.expand(bottomLayout.getComponentAt(1), bottomLayout.getComponentAt(3));

三、垂直对齐的解决方法 #

不管按钮高度是否有差异，只需设置HorizontalLayout的交叉轴对齐方式，就能让所有按钮垂直对齐：

// 在上述布局代码中添加这一行，让按钮垂直居中
bottomLayout.setAlignItems(Alignment.CENTER);

如果需要按钮顶部对齐，替换为Alignment.START；需要底部对齐则替换为Alignment.END。

内容的提问来源于stack exchange，提问作者Gary Greenberg