ΠΡΠΈΠ²Π΅Ρ
Π±ΡΠ»ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊΠΎΠ² ΡΡΠ°ΡΡΡ V3 - ΠΊΠ°ΠΊΠ°Ρ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π³ΠΈΠ±ΠΊΠΈΡ
Π±ΠΎΠΊΡΠΎΠ²?
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ
v3 Π½Π΅Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ Π±Π΅ΡΠ°-Π²Π΅ΡΡΠΈΠΈ, Π½ΠΎ ΡΡΡΠ΄Π½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΠΊΠ°ΠΊΡΡ-Π»ΠΈΠ±ΠΎ Π΄Π°ΡΡ - ΡΠ°ΠΊΠΎΠ²Π° ΠΏΡΠΈΡΠΎΠ΄Π° ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
v2 ΡΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ flexbox. ΠΠ΅Ρ ΠΏΡΠΈΡΠΈΠ½ ΡΡΡΠΎΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ ΠΌΠΈΠΊΡΠΈΠ½, ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΈ Π΄Π»Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ². ΠΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ Ρ
ΠΎΡΠΎΡΠ΅Π³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ»ΡΡΡΠΈΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ css, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠ΅ΡΠΊΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½Π°ΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ span()
ΠΈ gutter()
:
.item {
flex: 1 1 span(2);
margin-right: gutter();
}
ΠΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ Π² v3.
ΠΡΠΈΠ²Π΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ»Π° Π·Π°ΠΊΡΡΡΠ° Π΄Π°Π²Π½ΠΎ, Ρ ΠΏΡΠΎΡΡΠΎ Ρ ΠΎΡΠ΅Π» Π΅ΡΠ΅ ΡΠ°Π· ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠ°ΡΡΡ V3, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΡΡ Π²Π°Ρ Π·Π° ΠΏΠΎΡΡΡΡΠ°ΡΡΡΡ ΡΠ°Π±ΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΏΡΠΎΠ΄Π΅Π»Π°Π»ΠΈ Ρ Susy.
@ozke ΠΎΡΠ΅Π½Ρ Π±Π»ΠΈΠ·ΠΊΠΎ. Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΡΠΎΡΡΠΎ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
v3 Π½Π΅Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ Π±Π΅ΡΠ°-Π²Π΅ΡΡΠΈΠΈ, Π½ΠΎ ΡΡΡΠ΄Π½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΠΊΠ°ΠΊΡΡ-Π»ΠΈΠ±ΠΎ Π΄Π°ΡΡ - ΡΠ°ΠΊΠΎΠ²Π° ΠΏΡΠΈΡΠΎΠ΄Π° ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
v2 ΡΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ flexbox. ΠΠ΅Ρ ΠΏΡΠΈΡΠΈΠ½ ΡΡΡΠΎΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ ΠΌΠΈΠΊΡΠΈΠ½, ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΈ Π΄Π»Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ². ΠΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ»ΡΡΡΠΈΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ css, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠ΅ΡΠΊΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½Π°ΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ
span()
ΠΈgutter()
:ΠΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ Π² v3.