Question

我得到了以下标记：

＆＃13;

$scope.$on('$destroy', $scope.myPopover.destroy);

＆＃13;

.row {
  display: flex;
  align-items: stretch;
  
  margin: -16px;
  background: #ddd;
}

.row .col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  flex: 1;
  
  margin: 16px;
  background: #fff;
}

.header, .content, .footer {
  padding: 16px;
  
  background: red;
}

＆＃13;

不幸的是，第二个标题并未垂直对齐顶部。有没有办法用flexbox存档？我需要＆＃34; .header＆＃34;要对齐顶部和＆＃34; .content＆＃34;在盒子的其他部分居中。

问候！

Answer 1

不，不是真的，没有另一个包装器，它是一个flex-container。

因为flexbox在某种程度上是基于操纵边距，所以没有方法（AFAIK，虽然我有兴趣知道是否有）到align-self和然后flex:1将一个子元素放到除中心以外的其他地方。

我会这样做：在“content”div中添加一个包装器，给它display:flex填充标题下面的剩余空间，然后用{{justify-content:center创建包装器.col { height: 150px; width: 80%; margin: 1em auto; border: 1px solid grey; display: flex; flex-direction: column; } .header { background: lightblue; } .content { background: orange; } .flexy { flex: 1; display: flex; flex-direction: column; justify-content: center; background: plum; } 1}}。

这似乎是最合乎逻辑的方法

<div class="col">
  <div class="header">Header #2</div>
  <div class="flexy">
    <div class="content">Lorem Ipsum
      <br />Dolor</div>
  </div>
</div>

AJAX

Codepen Demo

Answer 2

Flexbox通过margin: auto;打开各种机会，这是其中之一。沿着柔性轴（在这种情况下为垂直）将margin设置为auto将吸收任何额外的空间，然后将其在弹性项目之间进行分割。最后，可以在不创建div汤的情况下垂直居中。

.row {
  display: flex;
  align-items: stretch;
  
  margin: -16px;
  background: #ddd;
}

.row .col {
  display: flex;
  flex-direction: column;
  
  flex: 1;
  
  margin: 16px;
  background: #fff;
}

.header, .content, .footer {
  padding: 16px;
  
  background: red;
}

.content {
  margin-top: auto;
  margin-bottom: auto;
}

<div class="row">
    <div class="col">
        <div class="header">Header #1</div>
        <div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
        <div class="footer">Footer</div>
    </div>

    <div class="col">
        <div class="header">Header #2</div>
        <div class="content">Lorem Ipsum<br />Dolor</div>
    </div>
</div>

flexbox垂直对齐儿童顶部，中心另一个

2 个答案: