修改

Question

我有一个带有display: flex; flex-wrap: wrap;的外部容器，然后在其中我有一系列带有display: flex;的框。这导致容器内的所有盒子占据相同的高度。

但是，每个框中还有其他元素，包括其中包含可变文本量的内容区域，以及包含按钮的页脚区域。

我希望页脚区域与每个框的底部对齐，无论内容区域内有多少文本。

我已经尝试将内容和页脚区域设置为display: flex并在页脚上设置align-self: flex-end;，但这不仅不会将页脚固定到每个框的底部，它还会打破内容区域内元素的布局（每个内容区域中都有一个标题以及文本内容）。

每个方框的布局如下：

----------------------------------------------------
| 'box' with display: flex;                        |
|                                                  |
| ------------------------------------------------ |
| | inner-container                              | |
| |                                              | |
| | -------------------------------------------  | |
| | | content-area, with h2 and variable      |  | |
| | | number of p tags/imgs                   |  | |
| | |                                         |  | |
| | -------------------------------------------  | |
| | -------------------------------------------  | |
| | | footer area                             |  | |
| | | (this is where it is on some boxes,     |  | |
| | | depending on content in content area)   |  | |
| | -------------------------------------------  | |
| |                                              | |
| |                                              | |
| | -------------------------------------------- | |
| | | This is where I want footer in all       | | |
| | | boxes, regardless of content area height | | |
| | -------------------------------------------- | |
| ------------------------------------------------ |
----------------------------------------------------

有可能使用flex吗？或者内部布局太复杂了？

修改

实际的HTML结构如下：

<div class="equal-height-container"><!-- has display: flex; flex-wrap: wrap -->
    <article class="equal-height-column"><!-- has display: flex -->
        <div class="inner-container">
            <div class="content-area">
                <h2>Lorem Ipsum</h2>
                <p><img style="float: right;" src="fake/path.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Morbi sodales congue erat, ac ultricies enim venenatis eget. Ut lacus ex, malesuada eget nibh eget, tristique aliquet nibh. Suspendisse quis mattis quam. Cras sit amet nunc lacinia, malesuada ex et, aliquet velit. Etiam quis mauris in nunc ultricies elementum id vitae dolor.</p>
            </div>
            <div class="footer-area">
                <a href="#" class="btn">Something</a>
            </div>
        </div>
    </article>
    <article><!-- more of these 'boxes' --></article>
</div>

这是一支包含现在代码的笔：https://codepen.io/danwellman/pen/akyzoA

Answer 1

在内部容器上使用flex-columns。然后将margin-top:auto应用于页脚。

＆＃13;

.outer {
  display: flex;
  margin: auto;
}
.inner {
  flex: 0 0 50%;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
}
h1 {
  background: lightgreen;
}
footer {
  margin-top: auto;
  text-align: center;
  background: #c0ffee;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ad magni, fugiat, voluptates alias voluptatibus esse quis doloribus nisi, inventore accusantium! Nemo at, accusamus alias.</p>

    <p>Lorem ipsum dolor sit amet.</p>
    <footer>
      <p>footer</p>
    </footer>
  </div>

  <div class="inner">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quibusdam.</p>
    <footer>
      <p>footer</footer>
  </div>
  <div class="inner">

  </div>

＆＃13;

`align-content：flex-end`似乎不适用于嵌套容器

修改

1 个答案: