Vaadin实现FlexLayout换行后设置JustifyContentMode为CENTER

你可以通过两种方式实现需求，根据场景选择即可：

方法一：CSS媒体查询（推荐，简洁易维护） #

这种方式通过固定屏幕断点，在小屏幕下直接覆盖布局的对齐方式：

1. 给FlexLayout添加自定义类名：

loginLayout.addClassName("login-layout");

2. 在项目的全局样式文件（如styles.css）中添加媒体查询规则：

.login-layout {
  justify-content: space-between; /* 大屏幕默认对齐方式 */
}

/* 替换767px为你实际的换行临界宽度 */
@media (max-width: 767px) {
  .login-layout {
    justify-content: center; /* 小屏幕换行后改为居中 */
  }
}

方法二：JS动态监听换行状态（精准适配） #

如果需要精确判断布局是否真的换行（而非依赖固定断点），可以通过前端JS监听元素位置变化，动态修改对齐方式：

在Java代码中添加Attach监听，注入前端逻辑：

loginLayout.addAttachListener(event -> {
    FlexLayout layout = event.getSource();
    layout.getElement().executeJs("""
        const layout = this;
        const updateJustify = () => {
            const children = Array.from(layout.children);
            // 判断是否换行：两个子元素的垂直偏移不同则说明已换行
            const isWrapped = children.length >= 2 && children[0].offsetTop !== children[1].offsetTop;
            layout.style.justifyContent = isWrapped ? 'center' : 'space-between';
        };
        // 初始化执行一次
        updateJustify();
        // 监听窗口尺寸变化
        window.addEventListener('resize', updateJustify);
        // 组件销毁时移除监听，避免内存泄漏
        layout.addEventListener('detach', () => {
            window.removeEventListener('resize', updateJustify);
        });
    """);
});

两种方式对比：

• 媒体查询适合大多数场景，配置简单，性能开销小；
• JS监听更精准，适合布局换行断点不固定的复杂场景。

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