如何实现Flexbox元素大屏一居中一居右、移动端同列居中？

完全可以用Flexbox实现这个需求，下面是具体的代码方案：

HTML结构 #

<div class="layout-container">
  <div class="center-element">居中元素</div>
  <div class="right-element">居右元素</div>
</div>

CSS样式 #

/* 基础Flex布局设置 */
.layout-container {
  display: flex;
  align-items: center; /* 垂直方向居中 */
  width: 100%; /* 占满父容器宽度 */
  padding: 1rem;
  box-sizing: border-box;
}

.right-element {
  margin-left: auto; /* 关键：将元素推到容器最右侧 */
}

/* 移动端响应式适配（以768px为断点，可根据需求调整） */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column; /* 切换为垂直排列 */
    gap: 1rem; /* 元素间添加间距 */
  }

  .right-element {
    margin-left: 0; /* 重置margin，让元素居中 */
  }
}

效果说明 #

• 大屏设备（>768px）：两个元素水平排列，center-element 自动处于容器水平中心位置，right-element 被 margin-left: auto 推到容器最右侧。
• 移动设备（≤768px）：容器切换为垂直排列，两个元素从上到下依次居中显示，同时通过 gap 保持合理间距。

你可以根据实际需求调整断点宽度、内边距、间距等样式参数。

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