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

v4 - Add more flex grid helper classes #18164

Closed
Skwai opened this issue Nov 4, 2015 · 2 comments
Closed

v4 - Add more flex grid helper classes #18164

Skwai opened this issue Nov 4, 2015 · 2 comments

Comments

@Skwai
Copy link

Skwai commented Nov 4, 2015

justify-content row helpers

Currently there only appears to be align-items level alignment of row and their columns. Would be great to add some classes to align items along the justify-content axis.

For example:

.row-xs-justify-center {
    justify-content: center;
}

<div class="row row-md-justify-center">
  <div class="col-md-4">This content is centered</div>
  <div class="col-md-4">This content is centered</div>
</div>

Instead of this:

<div class="row">
  <div class="col-md-4 col-md-offset-2">This content is centered</div>
  <div class="col-md-4">This content is centered</div>
</div>

column alignment row helpers

Would also be great to allow 'floating' of columns, eg.

.col-md-right {
  margin-left: auto;
}

<div class="row">
  <div class="col-md-4 col-md-right">Right aligned content</div>
</div>

extra flex grid helper classes

.col-fluid {
  padding-left: $grid-gutter-width / 2;
  padding-right: $grid-gutter-width / 2;
}

.row-nowrap {
  flex-wrap: nowrap;
}

.col-grow {
  flex-grow: 1;
}

<div class="row row-nowrap">
  <div class="col-fluid">I am a fluid column</div>
  <div class="col-fluid">I am a fluid column</div>
  <div class="col-fluid">I am a fluid column</div>
</div>
@Skwai Skwai changed the title Add more flex grid helper classes v4 - Add more flex grid helper classes Nov 4, 2015
@cvrebert
Copy link
Collaborator

cvrebert commented Nov 4, 2015

Related: #18088

@mdo mdo mentioned this issue Dec 8, 2015
17 tasks
@mdo mdo added this to the v4.0.0-alpha.3 milestone Feb 6, 2016
@mdo mdo mentioned this issue Feb 6, 2016
1 task
@mdo
Copy link
Member

mdo commented Feb 6, 2016

Coming in #19099.

@mdo mdo closed this as completed Feb 6, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants