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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

SELECT与内联样式的效果很好，代码示例的问题在于，由于未设置align-content的高度，因此它基于其内容，因此它呈现在外部father的顶部。

将div添加到height: 100%;，您将获得另一个（我认为是预期的）结果。

Stack snippet

.father

.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也成为一个弹性行项目，因此默认情况下它将拉伸为{{1将它作为默认值。

Stack snippet

father

align-items

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;