Die Gierigheid van Fleks Elemente in CSS

Kom ons het nou twee fleks-blokke, in 'n ry gerangskik. Hierdie blokke het 'n breedte van 100px, en hul ouer - 300px:

:

Soos jy kan sien, is die totale breedte van ons elemente minder as die breedte van die ouer, dus is daar leë spasie aan die regterkant.

As jy wil, kan hierdie leë spasie proporsioneel tussen ons elemente verdeel word. Dit word gedoen met die eienskap flex-grow, wat aan die fleks-elemente toegeken word. Die waarde van hierdie eienskap is 'n dimensielose getal.

Kom ons kyk in die praktyk hoe hierdie eienskap werk.

Voorbeeld

Nou het ons twee fleks-blokke met 'n breedte van 100px. Hul totale breedte van elemente is 200px, en die breedte van die ouer is - 300px. Dit beteken dat daar vry spasie oorbly van 100px.

As elemente nie flex-grow het nie, dan sien ons net hierdie vry spasie. As dit wel aan hulle toegeken is, sal die werklike breedte van die elemente meer wees as die gespesifiseerde een - hulle sal proporsioneel die vry spasie tussen hulle verdeel en dit by hul breedte voeg.

Laat vir die voorbeeld die eerste element se flex-grow gelyk wees aan 1, en die tweede een - 3. Kom ons bereken watter deel van die vry spasie elke element sal kry.

Eerstens moet ons die totale hoeveelheid eenhede flex-grow van al ons elemente kry. Die eerste element s'n is gelyk aan 1, en die tweede s'n - 3. Dit beteken dat die som gelyk is aan 4.

Laat ons nou die 100px vry spasie deel deur 4 en kry dat 25px kom op een eenheid flex-grow. Dit sal beteken dat by die eerste element een eenheid flex-grow bygevoeg sal word, dit is 25px, en by die tweede - drie eenhede, dit is 75px.

Die breedte van die eerste element sal 125px wees, en die tweede - 175px:

:

Voorbeeld

Laat die breedte van die ouer nou gelyk wees aan 400px, die breedte van die eerste element 200px, en die breedte van die tweede element - 100px. Dit sal beteken dat die vry spasie weer gelyk is aan 100px.

Kom ons ken aan elke element 'n flex-grow toe, gelyk aan 1. In die som sal dit 2 wees, dit is dat 100px vry spasie op 2 verdeel moet word. Dit sal beteken dat 50px op een eenheid gierigheid kom.

Aangesien alle elemente dieselfde waarde van flex-grow het, sal by alle elemente dieselfde waarde van 50px bygevoeg word. Dit beteken, dat die eerste element 250px sal word, en die tweede een sal 150px word:

:

Voorbeeld

Laat die breedte van die ouer weer gelyk wees aan 400px, die breedte van die eerste element 200px, en die breedte van die tweede element - 100px.

Kom ons stel nou vir die eerste element flex-grow in op waarde 3, en vir die tweede - op waarde 1. Dit sal beteken dat die gierigheid in die som gelyk is aan 4. Dan is een eenheid gierigheid gelyk aan 100px / 4 = 25px.

By die eerste element sal 75px bygevoeg word, en dit sal 275px word, en by die tweede - 25px, dit sal 125px word:

:

Praktiese Take

In al die take hieronder sal vir jou 'n sekere kode met fleks-elemente voorgelê word, wat breedte en flex-grow het. Bereken volgens die voorgelê kode watter afmetings elke element sal hê. Laat dan die kode loop en toets jou berekeninge deur die werklike breedtes van die elemente te meet.