v4 - Add more flex grid helper classes #18164
Description
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>