Aligning with auto margins

[indiesquidge]

Let me preface this issue card with a comment of recognition that the maintainers here are "hoping to have flex docs finished soon", and that they don't even know how they "feel about flex box being in core", and that v5 is perhaps underway.

Because of the remarks mentioned above, the topic of this issue is likely already known and is going to be addressed (I'm guessing in a non-core flexbox module). I just wanted to make sure it was explicitly posted somewhere.

I would like to request CSS class definitions for aligning flexbox items with margins. Something like

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

This is no hack, and is in the overview of the spec as the method used to 'separate flex items into distinct "groups".' It even has its own chapter, “Aligning with auto margins”.

Of course, there are many other things that have been requested for flexbox on this repo, and I don't mean to simply add the noise. If you choose to not support Flexbox, that would be fine. As Feross said, this project should be what you want it to be. I just thought I'd make sure it was noted as a fan desire, since it's a less known feature of aligning items with Flexbox.

[blairanderson]

did you know that .center exists which is:

.center { 
  margin-left: auto;
  margin-right: auto; 
}

[indiesquidge]

@blairanderson, right, but this couples the auto margins under the same class, so unfortunately it cannot be used for alignment of item groups within a flexbox container.

[mrmrs]

This seems useful - I'll add it to the next release.

[FrankySnow]

And what about vertical margins ? Vertical centering with Flexbox is useful too ! Adding these would be coherent :

.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

or

.center-v {
   margin-top: auto; 
   margin-bottom: auto; 
}

[0000marcell]

Sorry for reviving this, but what about @FrankySnow suggestion ?

[phivk]

This seems useful - I'll add it to the next release.

I had to come to this issue to find out that .ml-auto and .mr-auto exist.
Would be great to add it to the spacing docs