align-items- *类不按预期工作

Question

基于documentation，当使用align-items-*类时，row应该更改其垂直对齐方式，但是当我尝试它时，它不起作用：

.con_1 {
  height: 300px;
  background-color: pink;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container con_1">
  <div class="row align-items-start">
    <p class="col">
      Sample Text
    </p>
  </div>
  <div class="row align-items-end">
    <div class="col">
      Sample Text
    </div>
  </div>
</div>

但是，当我向height:100%;添加row时，它会有效，但遇到另一个问题，在添加多个row时，它会与另一个container对齐

.con_1 {
  height: 300px;
  background-color: pink;
}

.con_1 .row {
  height: 100%;
}

.con_2 {
  height: 300px;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container con_1">
  <div class="row align-items-start">
    <p class="col">
      Sample Text
    </p>
    <p class="col">
      Sample Text
    </p>
  </div>
  <div class="row align-items-end">
    <div class="col">Sample Text</div>
  </div>
</div>
<div class="container con_2">
</div>

文档清楚地显示它只使用了一个container，多个row并且它正常工作。我错过了什么？

Answer 1

这是flex的基本规则，在具有特定height之前，您无法对齐项目，将min-height设置为row或将其设为{{ 1}} flex-item调整高度。

＆＃13;

＆＃13;

flex-grow:1

＆＃13;

.con_1 {
  height: 300px;
  background-color: pink;
  display:flex;
  flex-direction:column;
}
.con_1 > .row{
  flex-grow:1;
}

＆＃13;

＆＃13;

＆＃13;