Question

在我的应用程序中，flex容器中的项目数是可变的，我希望它们在垂直和水平居中。我这样做的方法是使用justify-content进行水平居中，align-content进行垂直居中。

但是，从CSS Tricks' almanac阅读说明如下：

注意，当flexbox只有一行时，此属性无效。

这在我的申请中很快就会显现出来。虽然没有足够的项目包裹到另一条线上，但align-content的垂直居中根本不起作用。

只要出现第二行内容，align-content就会启动并按预期工作。

我确定这种行为是有原因的，但在我的情况下，结果是用户体验不一致。

我知道我可以通过其他方式实现垂直居中，例如将整个容器包裹在另一个弹性箱或桌子中，并在那里应用垂直居中。但是，我觉得应该有更好的方法吗？

我是否还缺少一些其他的flexbox选项可以在不引入更多HTML元素的情况下解决这个问题？如果是这样，那该选项是什么？：P

Answer 1

根据给定的事实，您应该使用align-items代替align-content

注意：

align-content适用于多线柔性版，这里有很好的描述：Whats the difference between align-content and align-items
根据弯曲方向，justify-content和align-items对齐方向更改

基于列的

＆＃13;

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;           /*  center vertical    */
  align-items: center;               /*  center horizontal  */
  height: 250px;
  border: 1px solid gray
}

.flex * {
  margin-bottom: 0;         /* removed margin at one side since they 
                               doesn't collapse when flexbox is used */
}

＆＃13;

<div class="flex">

  <h1>Hey</h1>
  <p>How are</p>
  <p>we doing</p>

</div>

＆＃13;

行基于

＆＃13;

.flex {
  display: flex;
  justify-content: center;           /*  center horizontal  */
  align-items: center;               /*  center vertical    */
  height: 250px;
  border: 1px solid gray
}

＆＃13;

<div class="flex">

  <h1>Hey </h1>
  <p>How are </p>
  <p>we doing</p>

</div>

＆＃13;

Answer 2

使用align-items＆amp; justify-content一起将垂直和水平居中于单个项目：

align-items:center; justify-content:center

请参阅小提琴：https://jsfiddle.net/p8zk4bkk/

Flexbox对齐内容与可变数量的项目不一致

2 个答案: