Question

我正在尝试将我的.button-cont元素居中并锚定到其容器的底部30px，.card-info。

我尝试将.card-info设置为flex-direction: column和align-items/align-content: flex-end，margin-top: 0方法和绝对定位，但都没有效果。

我是flexbox的新手，并且已经构建了一个嵌套布局，所以这很难实现。

注意：我已经给.card一个固定的高度来模拟我的应用程序的行为，这是通过jQuery动态发生的。我认为这是挑战的一部分。

.events-row {
  display: flex;
  justify-content: space-between;
}
.events-row .card {
  display: flex;
  flex-direction: column;
  flex-basis: 31.3%;
  position: relative;
  height: 1200px;
}
.events-row .card .card-img {
  position: relative;
}
.events-row .card .card-info {
  flex-grow: 1;
  position: relative;
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  border: 1px solid white;
  padding: 10px 30px;
  font-size: 1em;
}

<div class="events-row">
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" />
      </a>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
      </p>
      <div class="button-cont">
        <div class="button purple-button">Buy Tickets</div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" />
      </a>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
      </p>
      <div class="button-cont">
        <div class="button purple-button">Buy Tickets</div>
      </div>
    </div>
  </div>
</div>

演示：http://codepen.io/ourcore/pen/NdavvY

Answer 1

我已尝试将.card-info设为flex-direction: column ...

也许你做了，但没有采取所有必要步骤。

目前，flex-direction: column的父级.card-info为.button-cont的父级.button-cont。因此，.card-info甚至不是灵活项目。

使.button-cont成为弹性容器，然后您可以将弹性属性应用于.card-info { display: flex; flex-direction: column; } .button-cont { margin-top: auto; align-self: center; }。

将此添加到您的代码中：

exports.getUserFile = function (req, resp) {
      let filePath = path.join(__dirname, 'storage', req.params.fileName);
      resp.download(filePath);
  });
}

revised codepen

在flexbox布局中将元素锚定到底部

1 个答案: