Justified tabs in Foundation for Apps project

Question

I'm looking for a way to achieve full-width/justified tabs in a container in my Foundation app. This is what's happening currently.

In Twitter Bootstrap I can do this and I'm looking for the same type of functionality in Foundation. Is it possible natively?

I'm just using the default tabs structure example right now.

Answer 1

Tabs in Foundation use the flexbox model. By default, their flex-grow is 0 (they don't grow to fill up the parent). Change it to 1 and they will. Optionally, you might want to add text-align: center, as now the tab text will be smaller than the tab itself:

div.tabs .tab-item {
    flex-grow: 1;
    text-align: center;
}