CSS Flex align-content 属性不适用于内联高度声明答案

【问题标题】：CSS Flex align-content property doesn't work with inline height declarationCSS Flex align-content 属性不适用于内联高度声明
【发布时间】：2017-11-05 18:04:45
【问题描述】：

CSS Flex 属性 align-content 在具有内联高度声明的容器中不起作用。只要我将内联高度移动到单独的 CSS 文件类，它就可以正常工作。这是为什么？ Chrome 和 Opera 的行为相同。物品应该垂直移动，但要留在容器的顶部。我的内联声明是错误的 CSS 吗？附上代码。

.father {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

【问题讨论】：

你的意思是这样的吗：jsfiddle.net/mpq0vwt1/1
align-content 在这种情况下不做任何事情。它只能在多行容器中起作用。在您的图像中，只有一行。 stackoverflow.com/q/42613359/3597276
即使我让孩子们变宽并让他们分成两行，也没有影响。

标签： html css flexbox

【解决方案1】：

align-content 适用于内联样式，您的代码示例的问题是，由于未设置 father 的高度，它基于其内容，因此它呈现在顶部外部div。

将height: 100%; 添加到.father，你会得到另一个（我认为是预期的）结果。

堆栈sn-p

.father {
  height: 100%;              /*  added  */  
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

另一种选择是将外部 div 设为 flex 行容器，然后将 father 设为 flex 行项，因此默认情况下它会拉伸，因为 align-items 将其作为它的默认值。

堆栈sn-p

.father {
  flex-grow: 1;              /*  needed to take full width being a flex row item  */
  
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="display: flex; width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

【讨论】：

有也没有。如果我删除您在父亲周围添加的包装器 div，则 align-content: flex-end/center 无效，但是当我增加填充以使项目变大并换行到第二行时，align-content 开始工作。知道为什么吗？如果父项不是多行，我如何垂直居中？
@RPMcMurphy 我没有添加任何包装器？ ..正在使用您发布的代码。 align-items: center 垂直居中 flex 行项目，它们将在 flex 容器中居中（father），如果没有任何高度，你没有，它将折叠到最高的孩子和较小的孩子将在其中居中。
我的错。现在它起作用了。 Align-content 是一个多行属性。知道了。 Align-items 是单行的。 codepen.io/rpmcmurphy/pen/EbyYML 现在工作正常。
@RPMcMurphy 没错，但在父级 (father) 有一个高度之前不会影响任何事情，就像你现在在你的代码笔中一样。我的帮助对我的回答有用吗？

【解决方案2】：

##Add span to bg-5 and change some css


.father {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
  display:table;
}

.bx-5 span{
 display: table-cell;
 overflow: hidden;
 vertical-align: middle;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;"><span>Bella</span></div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

.father {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: space-around;
}

.child {
  border: 1px solid #fff;
  padding: 5px;
  color: white;
}

.bx-1 {
  background: #e51400;
}

.bx-2 {
  background: #fa6800;
}

.bx-3 {
  background: #f0a30a;
}

.bx-4 {
  background: #e3c800;
}

.bx-5 {
  background: #a4c400;
}

.bx-6 {
  background: #60a917;
}

.bx-7 {
  background: #00aba9;
}

.bx-8 {
  background: #1ba1e2;
}

.bx-9 {
  background: #aa00ff;
}

<div class="" style="width: 100%; height: 300px; background-color: darkorange">
  <div class="father">
    <div class="child bx-1">Bella</div>
    <div class="child bx-2">Bella</div>
    <div class="child bx-3">Bella</div>
    <div class="child bx-4">Bella</div>
    <div class="child bx-5" style="height: 80px;">Bella</div>
    <div class="child bx-6">Bella</div>
    <div class="child bx-7">Bella</div>
    <div class="child bx-8">Bella</div>
    <div class="child bx-9">Bella</div>
    <div class="child bx-10">Bella</div>
  </div>
</div>

【讨论】：

你应该用 span 换行。之后，您的父 div 应该是 display:table 和 span diplay:table-cell 和 vertical-allign:middle。
我不想使用显示表，flex 应该在这里工作。