Почему не выравнивается выравнивание моего div до нижней части моего flexbox?

У меня есть два столбца с равной высотой, и я пытаюсь получить ссылку «Подробнее» в каждом столбце, чтобы сидеть внизу столбца, независимо от того, сколько контента находится в соседнем столбце. Я использую align-self: flex-end , который, как я полагаю, должен избирательно выровнять этот единственный ребенок, но он не работает. Также важно, чтобы высоты div не растягивались каким-либо образом. Вот почему я указал align-items: flex-start; и 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. */ } 
 

Foo

The top of this paragraph should be aligned with the top of the paragraph in the other column.

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.

Read More (I should be at the bottom of this div!)

Bar

The top of this paragraph should be aligned with the top of the paragraph in the other column.

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.

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.

Read More

Вы можете использовать flex-direction: column и 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. */ } 
 

Foo

The top of this paragraph should be aligned with the top of the paragraph in the other column.

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.

Read More (I should be at the bottom of this div!)

Bar

The top of this paragraph should be aligned with the top of the paragraph in the other column.

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.

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.

Read More

Свойство align-self тесно связано с align-items . Один из них предназначен для переопределения другого. Следовательно, они оба работают вместе .

Однако align-items и align-items работают в основном в однолинейных гибких контейнерах .

Когда в перекрестной оси имеется несколько строк элементов гибкости – например, в вопросе – свойство, используемое для align-content .

Но когда align-content действует, как align-items и align-self ограничены. Удалите align-content из .column а align-self отлично.

Самый эффективный способ достижения вашего макета (если обертывание строк не является абсолютно необходимым) заключается в переключении на flex-direction: column и использование auto поля на .more .

Для получения дополнительной информации об auto полях см. Здесь: https://stackoverflow.com/a/33856609/3597276


Из спецификации:

8.3. Выравнивание по оси: align-items и свойства align-self

align-items устанавливает выравнивание по умолчанию для всех элементов контейнера flex, включая анонимные элементы flex. align-self позволяет переопределить это выравнивание по умолчанию для отдельных элементов flex.

8.4. Линии гибких линий упаковки: свойство align-content

Свойство align-content выравнивает линии гибкого контейнера в контейнере гибкого диска, когда в поперечной оси имеется дополнительное пространство, подобно тому, как justify-content выравнивание выравнивает отдельные элементы на основной оси. Обратите внимание: это свойство не влияет на однолинейный гибкий контейнер.