Question

当我在Chrome和Firefox上运行时，

HangfireServer\Hangfire和align-content似乎无能为力。

我不确定是什么错误。

＆＃13;

justify-content

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 90vh;
}
#header {
  flex: 1 0 200px;
  background-color: lightgreen;
  height: 200px;
  border-radius: 1rem;
}
#main {
  flex: 1 0 200px;
  background-color: coral;
  height: 200px;
  border-radius: 1rem;
}
#footer {
  flex: 1 0 200px;
  background-color: silver;
  height: 200px;
  border-radius: 1rem;
}
@media screen and (max-width: 915px) {
  #container {
    flex-flow: column wrap-reverse;
  }
}

＆＃13;

Answer 1

他们正在按照您的要求去做。这里的错误定义是什么错误。

如果您希望它们各自200px，那么您不应该使用flex-grow 1的{{1}}值来表达您的速记flex-grow: *1* 0 200px flex }}

相反，请重写#header { flex: 0 0 200px; ... }属性：

align-content

<强> Working JSFiddle

至于为什么align-content没有工作，你只有1行项目，所以它无关。

ALIGN-含量

当横轴上有额外的空间时，这会使柔性容器的线条对齐，类似于proty-content对齐主轴内各个项目的方式。

注意：当只有一行弹性项目时，此属性无效。

来自：CSS-Tricks

我猜你想要的是水平地垂直居中和，在这种情况下你不想要align-items，你想要align-content: center。

尝试将align-items: center替换为event.preventDefault()以获得垂直居中。

<强> JSFiddle example of align-items

flex-align和justify-content for flex不能按预期工作

1 个答案: