Question

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

要求：

使用Flexbox。
不要再添加HTML。
尽可能保持CSS清洁。

注意：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

最简单有效的想法是使用position: absolute，虽然根据其他要求可能需要另一种解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

如果您可以提供＆＃34;菜单＆＃34;固定宽度，你可以这样做，

＆＃13;

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;
}

＆＃13;

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

＆＃13;

或者这个。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

将margin-left和right设置为auto，您可以将第二个元素与中心对齐。

＆＃13;

header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
a {
  background-color: beige;
}
h1 {
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

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

＆＃13;

Answer 3

这是我的解决方案。我还没有添加更多的HTML，但我只使用了语义命名。

＆＃13;

var input=require('./task.json');
const _ = require(`underscore`);
var dps = [];
for(var element in input) {
    for (var i=0;i>dps.length;i++){
        if(dps[i].Technician===input[element].Technician){
            console.log("name already exists");
            dps[i].count=dps[i].Count+1;

        }

    }
    dps.push({Technician: input[element].Technician, Count:0});
}


  console.log(dps);

＆＃13;

我怎样才能＆＃34; pin＆＃34;一个节点到左视口边缘，同时保持其他节点相对于视口水平居中？

3 个答案: