Vue-material: [Feature Request] md-card should have md-flex support

[Cadienvan]

Hi,
first of all congratulation for the awesome library.
I'm testing it and, as a Vue.js newbie, I'm trying to achieve something simple with Vue Material.

I'm encountering a little problem related to cards.
In fact, I'm trying to have full-width cards even if inside content doesn't reach desired width.

Here is the piece of code related to the issue:

<main>
    <md-layout md-gutter>
        <md-card v-for="news_item in news" md-with-hover="true">
            <md-card-area>
                <md-card-media>
                    <img src="https://vuematerial.github.io/assets/card-image-1.jpg" alt="People">
                </md-card-media>

                <md-card-header>
                    <div class="md-title">{{news_item.title}}</div>
                    <div class="md-subhead">{{news_item.pubDate}}</div>
                </md-card-header>

                <md-card-content>
                    {{news_item.description}}
                </md-card-content>
            </md-card-area>
            <md-card-actions>
                <md-button v-bind:href="news_item.url" target="_blank"><md-icon>open_in_new</md-icon></md-button>
            </md-card-actions>
        </md-card>
    </md-layout>
</main>

And here's my result:

As you can see, second card is displayed full-width, but first one isn't as inside text doesn't reach desired width.

Is there any simple way to solve it without applying any external style to it?

Thank you,
Michael.

[Morgul]

I've just taken to adding style="flex: 1" to achieve the same thing. It's small, it works, but having md-flex support would be very nice, indeed.

[Cadienvan]

Hi @Morgul ,
indeed I could use inline style, but you can imagine I'd prefer not to.
I noticed some components have md-flex support, I guess it would be nice to have it on every element.

EDIT: As I'm pretty new to flexbox concept, I'm still learning how it works and how it should behave. I guess this problem's solution could be having a "grid system" based on flex-basis CSS property.

[marcosmoura]

The md-card "have" support to md-flex. You can use it like a regular md-layout:

<md-layout md-tag="md-card" md-flex></md-card>

I will add some better examples on the documentation website.

[dionysiosarvanitis]

In order card works properly it also needs md-column which overrides flex-direction: column set by default md-layout

<md-layout md-tag="md-card" md-column></md-layout>