我该如何“固定"一个节点到左视口边缘，同时保持其他节点相对于视口水平居中? [英] How can I "pin" one node to left viewport edge, while keeping other node horizontally centered relative to viewport?

问题描述

如何在保持My Awesome Site水平居中(相对于视口)的同时将Menu固定到视口的左边缘? align-items: center和justify-content: center只是起点...我不知道是否需要结合使用其他Flexbox规则.

How can I pin Menu to the left edge of the viewport, while keeping My Awesome Site horizontally centered (relative to the viewport)? align-items: center and justify-content: center are just starting points... I don't know if I need to use a combination of other Flexbox rules.

要求:

• 使用Flexbox.
• 不再添加HTML.
• 保持CSS尽可能干净.

注意:

• align-items: center和justify-content: center只是猜测...我对其他Flexbox组合很满意.

• align-items: center and justify-content: center are just guesses... I'm cool with other Flexbox combinations.

header {
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  background-color: beige;
}
h1 {
  background-color: yellow;
}

<header>
  <a>Menu</a>
  <h1>My Awesome Site</h1>
</header>

推荐答案

想到的最简单，最有效的方法是使用position: absolute，尽管基于其他要求，它可能还需要其他解决方案

The most simple and efficient that comes to mind is using position: absolute, though based on other requirements it might need another solution

header {
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  position: absolute;
  left: 0;
  background-color: beige;
}
h1 {
  background-color: yellow;
}

<header>
  <a>Menu</a>
  <h1>My Awesome Site</h1>
</header>

如果您可以将菜单"的宽度设置为固定宽度，则可以这样做

If you can give the "Menu" a fixed width, you can do this,

header {
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  width: 80px;  
  margin-right: -80px;
  background-color: beige;
}
h1 {
  margin: 0 auto;
  background-color: yellow;
}

<header>
  <a>Menu</a>
  <h1>My Awesome Site</h1>
</header>

或这个.

header {
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  width: 80px;  
  background-color: beige;
}
h1 {
  flex: 1;
  margin-right: 80px;
  background-color: yellow;
  text-align: center;
}

<header>
  <a>Menu</a>
  <h1>My Awesome Site</h1>
</header>

这篇关于我该如何“固定"一个节点到左视口边缘，同时保持其他节点相对于视口水平居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！