Question

我正在尝试使用flex-direction: column创建一个布局，其div具有不同的指定高度。如果为共享同一个flexbox父级的div指定不同的高度，我会发现垂直对齐消失。

我尝试使用align-items，align-content，justify-content进行各种组合无济于事。我使用flex-grow代替高度规则，这也没有效果。我可以将内容垂直居中的唯一方法是，如果我使项目的相对高度相同。

Here is my issue.

＆＃13;

header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  height: 40em;
  background-color: #badabf;
}

.site-title {
  height: 32em;
  background-color: #DEA5A4;
}

.site-navigation {
  height: 8em;
  background-color: #AEC6CF;
}

＆＃13;

<header>
  <div class="site-title">
    <h1> I am a page title </h1>
    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100">
  </div>
  <nav class="site-navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

＆＃13;

在我能够很好地理解如何有效使用flexbox之前，我可能会回到创建没有flexbox的布局。我真的想尽快开始使用它，尽管我遇到了这个问题，但感觉要小得多。

Answer 1

flex格式上下文的范围是父子关系。

换句话说，flex布局仅存在于flex容器及其子容器之间。

孩子们以后的后代不参与弹性布局。

您定位的元素是弹性项目的子级（.site-title），因此不会应用弹性属性。

您必须将flex项目设置为Flex容器，以使Flex属性在HTML结构中更深入。

＆＃13;

header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  height: 40em;
  background-color: #badabf;
}

.site-title {
  height: 32em;
  background-color: #DEA5A4;
  display: flex;                 /* NEW */
  flex-direction: column;        /* NEW */
  align-items: center;           /* NEW */
  justify-content: center;       /* NEW */
}

.site-navigation {
  height: 8em;
  background-color: #AEC6CF;
}

＆＃13;

<header>
  <div class="site-title">
    <h1> I am a page title </h1>
    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100">
  </div>
  <nav class="site-navigation">
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">History</a></li>
       <li><a href="#">Events</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

＆＃13;

使用flex-direction：column垂直居中不同高度的内容

1 个答案: