将弹性项目固定到容器的底部 [英] Pin a flex item to the bottom of the container

查看：125
本文介绍了将弹性项目固定到容器的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我想把标题和说明放在顶部，并且按钮在底部对齐

我也需要保持相同的HTML结构。



我真正需要的图片样本：





有人可以弄清楚吗？到目前为止，我还没有在互联网上找到一个修复。

/ * FLEXBOX RELATED * /。grid {display：flex;证明内容：空间之间; flex-flow：row wrap;}。block {flex：0 24％; display：flex;}。container {display：flex; flex-flow：排行; align-items：flex-start;}。title {flex：0 100％;}。desc {flex：0 100％;}。 align-self：flex-end;} / * NO FLEXBOX RELATED * /。block {background-color：#ccc;}。title {font-size：2rem; font-weight：bold;填充：0.5rem; text-align：center;}。desc {background-color：grey; padding：0.5rem;}。button {padding：0.5rem;颜色：蓝色; text-align：center; font-weight：bold;}

< div class = 网格 > < div class =block> < div class =container> < div class =title>标题1< / div> < div class =desc>描述描述描述描述描述描述描述描述描述< / div> < div class =button>按钮< / div> < / DIV> < / DIV> < div class =block> < div class =container> < div class =title> Title 2< / div> < div class =desc>描述说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明< / div> < div class =button>按钮< / div> < / DIV> < / DIV> < div class =block> < div class =container> < div class =title>标题3< / div> < div class =desc>描述说明说明说明说明说明说明说明说明说明说明说明说明说明说明< / div> < div class =button>按钮< / div> < / DIV> < / DIV> < div class =block> < div class =container> < div class =title>标题4< / div> < div class =desc>描述描述描述描述描述描述描述描述描述< / div> < div class =button>按钮< / div> < / DIV> < / div>< / div>

$ b

codepen的代码在这里

解决方案

由于您正在使用行方向的柔性容器，因此将最后一个项目固定到底部是不可能的。您正在处理横轴空间分布，这意味着伸缩线或者伸展或者打包，并且没有办法将两个项目固定到顶部和一个到底部（除非您超出了flexbox和使用绝对定位）。



以下是完整的解释。





使布局工作的一种简单有效的方法是在最后一项上使用flex自动余量的列方向容器。通过在主轴上对齐您的项目，您可以将单个项目分开。



以下是对Flex自动边距的说明：

b
$ b

/ * FLEXBOX RELATED * /。grid {display：flex;证明内容：空间之间; flex-flow：row wrap;}。block {flex：0 24％; display：flex;}。container {display：flex; flex-direction：column; / * new * / / * flex-flow：换行; * / / * align-items：flex-start; * /}。title {/ * flex：0 100％; * /}。desc {/ * flex：0 100％; * /}。button {margin-top：auto; / * new * / / * flex：0 100％; * / / * align-self：flex-end; * /} / * NO FLEXBOX RELATED * /。block {background-color：#ccc;}。title {font-size：2rem; font-weight：bold;填充：0.5rem; text-align：center;}。desc {background-color：grey; padding：0.5rem;}。button {padding：0.5rem;颜色：蓝色; text-align：center; font-weight：bold;}

< div class = 网格 > < div class =block> < div class =container> < div class =title>标题1< / div> < div class =desc>描述描述描述描述描述描述描述描述描述< / div> < div class =button>按钮< / div> < / DIV> < / DIV> < div class =block> < div class =container> < div class =title> Title 2< / div> < div class =desc>描述说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明< / div> < div class =button>按钮< / div> < / DIV> < / DIV> < div class =block> < div class =container> < div class =title>标题3< / div> < div class =desc>描述说明说明说明说明说明说明说明说明说明说明说明说明说明说明< / div> < div class =button>按钮< / div> < / DIV> < / DIV> < div class =block> < div class =container> < div class =title>标题4< / div> < div class =desc>描述描述描述描述描述描述描述描述描述< / div> < div class =button>按钮< / div> < / DIV> < / div>< / div>

$ b

修改后的codepen


I have 4 blocks with a title, description and a button.

I want to keep Title and Description aligned on top, and the Button to be aligned on bottom no matter how long the description or title is.

I also need to keep the same HTML structure.

Sample picture of what I actually need:

Can somebody figure it out? I didn't find a fix on internet so far.

/* FLEXBOX RELATED */
.grid {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.block {
  flex: 0 24%;
  display: flex;
}
.container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.title {
  flex: 0 100%;
}
.desc {
  flex: 0 100%;
}
.button {
  flex: 0 100%;
  align-self: flex-end;
}


/* NO FLEXBOX RELATED */
.block {
  background-color: #ccc;
}
.title {
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem;
  text-align: center;
}
.desc {
  background-color: grey;
  padding: 0.5rem;
}
.button {
  padding: 0.5rem;
  color: blue;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="block">
    <div class="container">
      <div class="title">Title 1</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 2</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 3</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 4</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
</div>

The codepen code is here

解决方案

Since you're working with a row-direction flex container, pinning the last item to the bottom is not possible. You're dealing with cross axis space distribution, which means flex lines are either stretched or packed, and there's no way to pin two items to the top and one to the bottom (unless you go beyond flexbox and use absolute positioning).

Here's a complete explanation.

A simple and effective method to make your layout work would be a column-direction container with a flex auto margin on the last item. By aligning your items on the main axis you can space away individual items.

Here's an explanation of flex auto margins:

/* FLEXBOX RELATED */
.grid {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.block {
  flex: 0 24%;
  display: flex;
}
.container {
  display: flex;
  flex-direction: column; /* new */
  /* flex-flow: row wrap; */
  /* align-items: flex-start; */
}
.title {
  /* flex: 0 100%; */
}
.desc {
  /* flex: 0 100%; */
}
.button {
  margin-top: auto; /* new */
  /* flex: 0 100%; */
  /* align-self: flex-end; */
}


/* NO FLEXBOX RELATED */
.block {
  background-color: #ccc;
}
.title {
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem;
  text-align: center;
}
.desc {
  background-color: grey;
  padding: 0.5rem;
}
.button {
  padding: 0.5rem;
  color: blue;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="block">
    <div class="container">
      <div class="title">Title 1</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 2</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 3</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 4</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
</div>

revised codepen

这篇关于将弹性项目固定到容器的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆