v4 clearfix on .card-{block,header,footer} breaks flex layouts

[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;

[mendeza]

I think you meant class="card-subtitle"

[cvrebert]

X-Ref: #18655

[cvrebert]

@ju1ius I can't seem to reproduce any difference in spacing on either Chrome or Firefox on OS X between Flexbox and non-Flexbox cards. Are you using some other browser? Could you post a JS Bin or JS Fiddle that demonstrates the difference?
Flexbox example: https://jsfiddle.net/6ancmdx0/6/
Non-Flexbox example: https://jsfiddle.net/t9rnra28/3/

[ju1ius]

Here are the updated examples:
Without fix:
Flexbox: https://jsfiddle.net/6ancmdx0/7/
Non-Flexbox: https://jsfiddle.net/t9rnra28/5/
With fix:
Flexbox: https://jsfiddle.net/6ancmdx0/9/
Non Flexbox: https://jsfiddle.net/t9rnra28/6/

In all examples, I added

.card-footer {
  display: flex;
  justify-content: space-between;
}

Expected result: the first child of .card-footer should be aligned to the left of it's parent padding-box, and the last child to the right.

The issue is with the code in scss/_card.scss on line 83.

.card-footer {
  @include clearfix;
  // ...
}

It adds an ::after pseudo element with display: table to the .card-footer element.
If I then add display: flex to the .card-footer, the ::after pseudo becomes a flex-item, thus breaking the desired alignment.

That's why the code in the above-mentioned file should be...

.card-footer {
  @if (not $enable-flex) {
    @include clearfix;
  }
  // ...
}

...idem with .card-header, .card-block, and probably also in other places in the framework.

Because if I enable the flexbox option, I don't need to clear floats that don't exist ! 😉
And after a quick look at the card component, I can't see a reason for these clearfixes, since nothing is floated. Maybe they could be removed entirely ?

[ju1ius]

Thanks @twbs-lmvtfy, but this is irrelevant to the issue. 😇

[cvrebert]

And after a quick look at the card component, I can't see a reason for these clearfixes, since nothing is floated. Maybe they could be removed entirely ?

I believe they are needed because users might choose to include floated things in the card. See the first card in my earlier examples, and #18655.

[cvrebert]

In all examples, I added

Ah, I hadn't been clear on the fact that custom CSS was needed to trigger the problem.

[cvrebert]

Hmm, but even with Flexbox enabled, the Card itself is still display:block by default.
This is above my CSS paygrade. Gonna leave this one to @mdo.

[ju1ius]

I believe they are needed because users might choose to include floated things in the card. See the first card in my earlier examples, and #18655.

I'm also suspecting a «clearfix all the things just in case» syndrom.
In this case I think the mixins calls should be entirely removed since:

1. People usually know why, where & when to clear floats, and there's an utility class for that.
2. It interferes with display: flex on mentioned card subcomponents

#18633 and #18655 should be closed as invalid.

[cvrebert]

Apparently the plan is to Flexbox-ify all the things (#18901 (comment)), so #18851 sounds reasonable, FWIW.

[thierryk]

And after a quick look at the card component, I can't see a reason for these clearfixes, since nothing is floated. Maybe they could be removed entirely ?

It does not really matter if something is floated in there. In the examples on jsfiddle.net, the button styled via pull-xs-right is floated to the right (float:right !important) but shows on the left side of the box. This is because its computed value is float:none. In a "flex" context, float has no effect, hence there is no need for clearfix.

[twbs-lmvtfy]

Hi @thierryk!

You appear to have posted a live example (https://fiddle.jshell.net/6ancmdx0/7/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 6843, column 7: E047: .btn should only be used on <a>, <button>, <input>, or <label> elements.
• line 6844, column 7: E047: .btn should only be used on <a>, <button>, <input>, or <label> elements.
• line 6821, column 5: W007: Found one or more <button>s missing a type attribute.
• line 6826, column 5: W007: Found one or more <button>s missing a type attribute.
• line 6829, column 5: W007: Found one or more <button>s missing a type attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)