如何更改大屏幕上的菜单对齐方式？

<div class="menu">
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.menu {
  display: flex;
  justify-content: center;
}

.menu ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between; /* 或者其他对齐方式，如flex-start、flex-end等 */
}

.menu li {
  padding: 10px;
}

@media screen and (max-width: 768px) {
  .menu ul {
    flex-direction: column;
    align-items: center;
  }
}

<button onclick="changeAlignment()">切换对齐方式</button>

<script>
function changeAlignment() {
  var menu = document.querySelector('.menu ul');
  if (menu.style.justifyContent === 'center') {
    menu.style.justifyContent = 'flex-start';
  } else {
    menu.style.justifyContent = 'center';
  }
}
</script>