【问题标题】:Flexbox align-content space between with flex columnFlexbox 与 flex 列之间的对齐内容空间
【发布时间】:2019-11-04 14:18:45
【问题描述】:

我想点击阅读更多按钮并将其推到这张卡片的底部。 flex-col 是否有 align-content:space-between 的等价物?顶部、中段和查看更多按钮都在自己的div中包裹在父卡div里面。

【问题讨论】:

  • 如果您提供minimal reproducible example,我们或许可以提供帮助
  • 它变成了 justify-content:space-between;请注意,它与 flex-direction 一起使用
  • 是的,我需要它是弹性方向列
  • 所以使用 justify-content .....我应该重复它与 flex-direction 一起使用吗?如果它不起作用,请使用显示您的问题的代码来澄清您的问题。截图没用

标签: css flexbox tailwind-css


【解决方案1】:

您可以通过将justify-content: space-betweentext-align: right 组合到阅读更多按钮来实现此目的。

这会导致:

.card {
  background: #ddd;
  margin: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-2 {
  text-align: right;
}

.child {
  background: #eee;
  padding: 1rem;
}
<div class="card">
  <div class="child">
    <h1>Article Awesome</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione inventore, dolor dolorem vero, tenetur rerum tempora autem repudiandae deleniti rem sunt perferendis quasi dolore voluptatum fugit quisquam asperiores exercitationem. Exercitationem?
    </p>
  </div>
  <div class="child child-2">Read More ...</div>
</div>

请注意,您可以为卡片设置任何高度,它会通过底部的阅读更多按钮进行相应缩放。

【讨论】:

    猜你喜欢
    • 2020-12-09
    • 1970-01-01
    • 2021-07-05
    • 2015-09-23
    • 2018-05-24
    • 1970-01-01
    • 1970-01-01
    • 2020-08-13
    • 1970-01-01
    相关资源
    最近更新 更多