Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More vertical alignment options for the Columns block #16190

Open
idea--list opened this issue Jun 16, 2019 · 1 comment
Open

More vertical alignment options for the Columns block #16190

idea--list opened this issue Jun 16, 2019 · 1 comment
Labels
[Block] Columns Affects the Columns Block [Type] Enhancement A suggestion for improvement.

Comments

@idea--list
Copy link

idea--list commented Jun 16, 2019

Is your feature request related to a problem? Please describe.
Until today columns block and related blocks make use of align-self for vertical alignment of elements in a column. However align-self is restricted to the following possibilities:
auto | flex-start | flex-end | center | baseline | stretch
This allows only very basic vertical aligment

Describe the solution you'd like
Why do not rather rely on justify-content that also allows additional settings like:
space-between | space-around | space-evenly
The only extra css that needs to be applied to the column to make justify-content work is:
display: flex; flex-direction: column;
This would open up the door for more advanced vertical alignment which are really common in any kind of design (think of media & text block for example)

@swissspidy swissspidy added the [Block] Columns Affects the Columns Block label Jun 17, 2019
@youknowriad youknowriad added the [Type] Enhancement A suggestion for improvement. label Feb 27, 2020
@youknowriad youknowriad changed the title Columns block and derivates should not rely on align-self More vertical alignment options for the Columns block Feb 27, 2020
@draganescu
Copy link
Contributor

draganescu commented Apr 23, 2020

Howdy @idea--list while initially I liked this idea, I wonder, considering that columns will only contain blocks that are by default aligned with an equal space-around, only the space-evenly seems to be useful for when one column becomes longer and you want the contents of other columns to be spaced evenly to the longest.

However I tested simply adding display: flex; flex-direction: column; and it changed the display of the blocks within quite a lot.

Before:

before

After:

after

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants