Introducere în Web Development

Atunci când două sau mai multe elemente au aceeași valoare de flex-grow, browserul calculează cât de mult ar ocupa fiecare element dacă nu ar avea flex-grow deloc, apoi aplică aceleași proporții.

Ce facem dacă vrem coloane perfect egale?

Primul instinct poate ar fi să setăm width, ceea ce ar funcționa uneori, dar atunci când nu va funcționa ne vom smulge părul din cap. Mai e problema că trebuie să știm mereu câte elemente avem, ceea ce nu e mereu garantat.

În aceste cazuri, putem folosi proprietatea flex-basis. Aceasta funcționează asemănător cu width, dar este folosit pentru a determina proporțiile, indiferent de conținutul unui element.

Un truc pe care îl folosesc eu e să pun flex-basis: 1px pentru a avea o valoare mică, dar care în continuare va fi folosită pentru calculul proporțiilor.

                    .flex-parent {
  display: flex;
}

.flex-parent > * {
  flex-grow: 1;
  flex-baisis: 1px;
}