v4 clearfix on .card-{block,header,footer} breaks flex layouts
Created by: ju1ius
In latest v4-dev branch, the clearfix mixin is added on all the card subcomponents.
If the subcomponent is added a flex display, the :after
pseudo added by the mixin adds unwanted spacing at the end of the flex block's main axis.
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="card">
<img class="card-img-top" src="http://loremflickr.com/320/180/space-oddity">
<div class="card-block">
<h2 class="card-title">Space Oddity</h2>
<div class="card-subtitle">David Bowie ✝</div>
</div>
<div class="card-footer">
<span>Release: 1969</span>
<div class="btn-group">
<div class="btn btn-sm btn-primary"><i class="fa fa-play"></i></div>
<div class="btn btn-sm btn-warning"><i class="fa fa-star"></i></div>
</div>
</div>
</div>
I think the mixin should be guarded by a @if(not $enable-flex)
block;