Jakie są różnice między flex-grow i width?

Question

Zacząłem ostatnio używać Flexbox i często pojawia się sytuacja, w której muszę rozdzielić przestrzeń na głównej osi między elementami.

Często waham się między width a flex-grow. Na przykład, jeśli chcę jedną pozycję mierzyć 2 miary, a drugą 1 miarę, dodając do 100%, mam dwie możliwości. Mogę ustawić width: 66.6% i width: 33.3% lub flex-grow: 2 i flex-grow: 1.

Czasami, jeśli chcę, aby jeden element wyrósł na pozostałą część przestrzeni, mogę wykonać width: 100% lub flex-grow: 1.

Jak wybrać? Jakie są różnice/uwarunkowania w używaniu szerokości i flex-grow?

Answer 1

width i flex-grow to dwie całkowicie różne właściwości CSS.

Właściwość width służy do definiowania szerokości elementów.

Właściwość flex-grow służy do dystrybucji wolnej przestrzeni w giętkim pojemniku. Ta właściwość nie stosuje określonej długości do elementu, na przykład właściwości width. Pozwala po prostu na to, aby przedmiot elastyczny zużywał każdą dostępną przestrzeń.

Czasami, jeśli chcę jeden element rosnąć resztę przestrzeni, mogę też zrobić width: 100% lub flex-grow: 1. Jak wybrać?

Tak, jeśli istnieje jeden element w wierszu, width: 100% i flex-grow: 1 może mieć ten sam efekt (w zależności od padding, border i box-sizing Ustawienia).

Ale co, jeśli są dwa elementy i czy drugi ma zająć pozostałe miejsce? Z rodzeństwem w pojemniku, width: 100% powoduje przepełnienie. Sądzę, że możesz zrobić coś takiego:

width: calc(100% - width of sibling); 

Ale co, jeśli szerokość rodzeństwa jest dynamiczna lub nieznana? calc nie jest już dostępna.

Szybkie i łatwe rozwiązanie to flex-grow: 1.

---

Podczas width i flex-grow są jabłka do pomarańczy, width i flex-basis są jabłka-do-jabłek. Właściwość

Właściwość flex-basis ustawia początkowy główny rozmiar elementu flex i jest podobna do width.

• What are the differences between flex-basis and width?

różnic między flex-basis i flex-grow patrz:

• flex-grow not sizing flex items as expected