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.

Sign up for GitHub

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

Jump to bottom

Class .col with flex-direction: column #173

Closed
oleksiibilous opened this issue May 4, 2016 · 3 comments
Closed

Class .col with flex-direction: column #173

oleksiibilous opened this issue May 4, 2016 · 3 comments

Comments

@oleksiibilous
Copy link

Hello

I could not find class .col with flex-direction: column; inside. Maybe I missed something, but there is class.col.reverse with flex-direction: column-reverse and I thought that class .col would be a way to implement default vertical flow.

Can you advise, please?

Thanks
@kristoferjoseph
Copy link
Owner

Great question!
This is was a contentious decision. I fully expected to have .col behave the way you explained, but after experimenting with this and discovering the unintended side effects this approach had on the content in the grid I decided to remove this and think about it more.

I encourage you to try it out yourself in dev tools to see what I mean. Then come back and tell me your thoughts. Thanks!

@kristoferjoseph kristoferjoseph mentioned this issue Jul 11, 2016
Closed
@MrBlenny
Copy link

What is the recommended way of doing columns right now?
It is quite surprising that flex-direction: column is not featured.

Would love to see an equivalent feature set to some of the other layout systems such as:
https://material.angularjs.org/latest/layout/alignment

@matheusdavidson
Copy link

this is really needed, flex-direction: column is part of flexbox.

@kgregory kgregory mentioned this issue Mar 14, 2017
Merged
silvenon pushed a commit to roylee0704/react-flexbox-grid that referenced this issue Mar 15, 2017
@kgregory @silvenon
Eliminate Col's reverse property (#98)
491d276 
- Col's reverse property was a boolean that would apply the 'reverse' class if true.  However, there is no support for reverse for columns in flexboxgrid.

There is a .col.reverse class defined, but it sets the flex-direction to column-reverse, which has no effect on an element that is not displayed as flex.

Also, columns are not given the .col class in the way that rows are given the .row class, so the designation of .reverse on a Col would not even cause these rules to be applied.

The .col.reverse class appears to be lint, left over from an abandoned attempt to support columnar flexboxes in the flexboxgrid package.  See:  kristoferjoseph/flexboxgrid#173
codegod3333 added a commit to codegod3333/react-flexbox-grid that referenced this issue Jan 30, 2025
@codegod3333
Eliminate Col's reverse property (#98)
c7460ff 
- Col's reverse property was a boolean that would apply the 'reverse' class if true.  However, there is no support for reverse for columns in flexboxgrid.

There is a .col.reverse class defined, but it sets the flex-direction to column-reverse, which has no effect on an element that is not displayed as flex.

Also, columns are not given the .col class in the way that rows are given the .row class, so the designation of .reverse on a Col would not even cause these rules to be applied.

The .col.reverse class appears to be lint, left over from an abandoned attempt to support columnar flexboxes in the flexboxgrid package.  See:  kristoferjoseph/flexboxgrid#173
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kristoferjoseph @matheusdavidson @oleksiibilous @MrBlenny