对齐到我的

对齐到我的

关注
发信
关注(28)粉丝(399)

为什么 align-self 不将我的 div 对齐到我的 flexbox 底部?

本文介绍了为什么 align-self 不将我的 div 对齐到我的 flexbox 底部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个等高的列，我试图让每列中的阅读更多"链接位于列的底部，无论相邻列中有多少内容.我正在使用 align-self: flex-end，我认为它应该有选择地对齐这个单个孩子，但它不起作用.div 高度不以任何方式拉伸也很重要.这就是为什么我指定了 align-items: flex-start; 和 align-content: flex-start;.

https://jsfiddle.net/stewx/b2aoksgf/2/

h3,p{宽度:100%；边框:1px纯蓝色；}div {填充:5px；}.外容器{显示:弹性；边框:1px纯黑色；填充:5px；}.柱子 {边框:1px纯红色；显示:弹性；flex-wrap: 包裹;弹性方向:行；宽度:50%；对齐内容:flex-start；}.更多的 {边框:1px 绿色虚线；字体粗细:粗体；文本对齐:右；align-self: flex-end;/* 没有效果.我原以为这会移动到底部.*/}
<div 类=列"><h3>富<p>该段落的顶部应与另一列中的段落顶部对齐.</p><p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.sed 坐 amet ullamcorper urna.Donec convallis lorem ut semper ultrices.整数 feugiat sodales leo.sed 非 lacus sed nisi semper eleifend.Maecenas ultricies 调味品时间.Fusce vel aliquetmagna, nec sollicitudin nunc.Fusce ut facilisis lorem.Vestibulum porttitor vehicula mi，在 bibendum ante ultrices 坐 amet.Nulla at dui tempor、ornare risus eu、lobortis lorem.</p><p class="more"><a href="#">阅读更多(我应该在这个 div 的底部！)</a></p>
<div 类=列"><h3>酒吧<p>该段落的顶部应与另一列中的段落顶部对齐.</p><p>Vivamus porttitor pharetra eros quis maximus.Sed non blandit justo.Phasellus viverratellus eu diam tempor pretium.Nam iaculis odio non quam iaculis，坐 amet vehicula ipsum scelerisque.Nunc ornare augue quis congue finibus.Curabitur efficitur magna凤尾兰.Nulla nunc mauris，dignissim sat amet arcu sat amet，pellentesque condimentum sapien.</p><p>Donectellus purus, sodales non pellentesque a, accumsan ut orci.Vivamus a tincidunt odio, nec fringilla nulla.Nulla eu metus 猫.Vivamus dictum accumsan ante pellentesque dapibus.Donec neque orci，congue pretium leo quis，tempor aliquam justo.Sed elementum cursus mauris vel consequat.Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Aliquam varius、发酵调味品的赌注、lorem urna vulputate justo、nec maximus lectus leo sodales lectus.In nec orci mollis, varius anteid，faucibus ipsum.Etiam auctor a mi semper egestas.Morbi tincidunt at nunc non semper.Sed m​​attistellus ex, in consequat leo facilisis id.Vivamus eleifend pellentesque tempus.</p><p class="更多"><a href="#">阅读更多</a></p>

解决方案

您可以在 上使用 flex-direction: column 和 margin-top: auto.更多

h3,p{宽度:100%；边框:1px纯蓝色；}div {填充:5px；}.外容器{显示:弹性；边框:1px纯黑色；填充:5px；}.柱子 {边框:1px纯红色；显示:弹性；flex-wrap: 包裹;弹性方向:列；宽度:50%；对齐项目:flex-start；}.更多的 {边框:1px 绿色虚线；字体粗细:粗体；文本对齐:右；边距顶部:自动；/* 没有效果.我原以为这会移动到底部.*/}
<div 类=列"><h3>富<p>该段落的顶部应与另一列中的段落顶部对齐.</p><p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.sed 坐 amet ullamcorper urna.Donec convallis lorem ut semper ultrices.整数 feugiat sodales leo.sed 非 lacus sed nisi semper eleifend.Maecenas ultricies 调味品时间.Fusce vel aliquetmagna, nec sollicitudin nunc.Fusce ut facilisis lorem.Vestibulum porttitor vehicula mi，在 bibendum ante ultrices 坐 amet.Nulla at dui tempor、ornare risus eu、lobortis lorem.</p><p class="more"><a href="#">阅读更多(我应该在这个 div 的底部！)</a></p>
<div 类=列"><h3>酒吧<p>该段落的顶部应与另一列中的段落顶部对齐.</p><p>Vivamus porttitor pharetra eros quis maximus.Sed non blandit justo.Phasellus viverratellus eu diam tempor pretium.Nam iaculis odio non quam iaculis，坐 amet vehicula ipsum scelerisque.Nunc ornare augue quis congue finibus.Curabitur efficitur magna凤尾兰.Nulla nunc mauris，dignissim sat amet arcu sat amet，pellentesque condimentum sapien.</p><p>Donectellus purus, sodales non pellentesque a, accumsan ut orci.Vivamus a tincidunt odio, nec fringilla nulla.Nulla eu metus 猫.Vivamus dictum accumsan ante pellentesque dapibus.Donec neque orci，congue pretium leo quis，tempor aliquam justo.Sed elementum cursus mauris vel consequat.Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Aliquam varius、发酵调味品的赌注、lorem urna vulputate justo、nec maximus lectus leo sodales lectus.In nec orci mollis, varius anteid，faucibus ipsum.Etiam auctor a mi semper egestas.Morbi tincidunt at nunc non semper.Sed m​​attistellus ex, in consequat leo facilisis id.Vivamus eleifend pellentesque tempus.</p><p class="更多"><a href="#">阅读更多</a></p>

I have two equal-height columns and I am trying to get the "Read More" link in each column to sit at the bottom of the column, no matter how much content is in the adjacent column. I am using align-self: flex-end, which I think is supposed to selectively align this single child, but it isn't working. It is also important that the div heights are not stretched in any way. That is why I have specified align-items: flex-start; and align-content: flex-start;.

https://jsfiddle.net/stewx/b2aoksgf/2/

h3,
p {
  width: 100%;
  border: 1px solid blue;
}

div {
  padding: 5px;
}

.outer-container {
  display: flex;
  border: 1px solid black;
  padding: 5px;
}

.column {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 50%;
  align-content: flex-start;
}

.more {
  border: 1px dashed green;
  font-weight: bold;
  text-align: right;
  align-self: flex-end; /* Has no effect. I would have expected this to move to the bottom. */
}
<div class="outer-container">
  <div class="column">
    <h3>
  Foo
  </h3>
    <p>
      The top of this paragraph should be aligned with the top of the paragraph in the other column.</p>
    <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper urna. Donec convallis lorem ut semper ultrices. Integer feugiat sodales leo. Sed non lacus sed nisi semper eleifend. Maecenas ultricies condimentum tempor. Fusce vel aliquet
      magna, nec sollicitudin nunc. Fusce ut facilisis lorem. Vestibulum porttitor vehicula mi, in bibendum ante ultrices sit amet. Nulla at dui tempor, ornare risus eu, lobortis lorem.
    </p>
    <p class="more"><a href="#">Read More (I should be at the bottom of this div!)</a></p>
  </div>
  <div class="column">
    <h3>
  Bar
  </h3>
    <p>
      The top of this paragraph should be aligned with the top of the paragraph in the other column.</p>
    <p>
      Vivamus porttitor pharetra eros quis maximus. Sed non blandit justo. Phasellus viverra tellus eu diam tempor pretium. Nam iaculis odio non quam iaculis, sit amet vehicula ipsum scelerisque. Nunc ornare augue quis congue finibus. Curabitur efficitur magna
      a fringilla convallis. Nulla nunc mauris, dignissim sit amet arcu sit amet, pellentesque condimentum sapien.
    </p>

    <p>
      Donec tellus purus, sodales non pellentesque a, accumsan ut orci. Vivamus a tincidunt odio, nec fringilla nulla. Nulla eu metus felis. Vivamus dictum accumsan ante pellentesque dapibus. Donec neque orci, congue pretium leo quis, tempor aliquam justo.
      Sed elementum cursus mauris vel consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius, ante in fermentum condimentum, lorem urna vulputate justo, nec maximus lectus leo sodales lectus. In nec orci mollis, varius ante
      id, faucibus ipsum. Etiam auctor a mi semper egestas. Morbi tincidunt at nunc non semper. Sed mattis tellus ex, in consequat leo facilisis id. Vivamus eleifend pellentesque tempus.
    </p>
    <p class="more"> <a href="#">Read More</a>
    </p>
  </div>
</div>

解决方案

You can use flex-direction: column and margin-top: auto on .more

h3,
p {
  width: 100%;
  border: 1px solid blue;
}

div {
  padding: 5px;
}

.outer-container {
  display: flex;
  border: 1px solid black;
  padding: 5px;
}

.column {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 50%;
  align-items: flex-start;
}

.more {
  border: 1px dashed green;
  font-weight: bold;
  text-align: right;
  margin-top: auto;
  /* Has no effect. I would have expected this to move to the bottom. */
}
<div class="outer-container">
  <div class="column">
    <h3>
  Foo
  </h3>
    <p>
      The top of this paragraph should be aligned with the top of the paragraph in the other column.</p>
    <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper urna. Donec convallis lorem ut semper ultrices. Integer feugiat sodales leo. Sed non lacus sed nisi semper eleifend. Maecenas ultricies condimentum tempor. Fusce vel aliquet
      magna, nec sollicitudin nunc. Fusce ut facilisis lorem. Vestibulum porttitor vehicula mi, in bibendum ante ultrices sit amet. Nulla at dui tempor, ornare risus eu, lobortis lorem.
    </p>
    <p class="more"><a href="#">Read More (I should be at the bottom of this div!)</a></p>
  </div>
  <div class="column">
    <h3>
  Bar
  </h3>
    <p>
      The top of this paragraph should be aligned with the top of the paragraph in the other column.</p>
    <p>
      Vivamus porttitor pharetra eros quis maximus. Sed non blandit justo. Phasellus viverra tellus eu diam tempor pretium. Nam iaculis odio non quam iaculis, sit amet vehicula ipsum scelerisque. Nunc ornare augue quis congue finibus. Curabitur efficitur magna
      a fringilla convallis. Nulla nunc mauris, dignissim sit amet arcu sit amet, pellentesque condimentum sapien.
    </p>

    <p>
      Donec tellus purus, sodales non pellentesque a, accumsan ut orci. Vivamus a tincidunt odio, nec fringilla nulla. Nulla eu metus felis. Vivamus dictum accumsan ante pellentesque dapibus. Donec neque orci, congue pretium leo quis, tempor aliquam justo.
      Sed elementum cursus mauris vel consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius, ante in fermentum condimentum, lorem urna vulputate justo, nec maximus lectus leo sodales lectus. In nec orci mollis, varius ante
      id, faucibus ipsum. Etiam auctor a mi semper egestas. Morbi tincidunt at nunc non semper. Sed mattis tellus ex, in consequat leo facilisis id. Vivamus eleifend pellentesque tempus.
    </p>
    <p class="more"> <a href="#">Read More</a>
    </p>
  </div>
</div>

这篇关于为什么 align-self 不将我的 div 对齐到我的 flexbox 底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-01 10:43
Powered by LMLPHP ©2024 对齐到我的 0.043677