рдирдорд╕реНрддреЗ
рд╕реЛрдЪ рд░рд╣рд╛ рдерд╛ рдХрд┐ V3 рдХреА рд╕реНрдерд┐рддрд┐ рдХреНрдпрд╛ рд╣реИ - рдЕрднреА рддрдХ рдХреЛрдИ рдлреНрд▓реЗрдХреНрд╕ рдмреЙрдХреНрд╕ рд╕рдорд░реНрдерди?
рдзрдиреНрдпрд╡рд╛рдж
v3 рдмреАрдЯрд╛ рд░рд┐рд▓реАрдЬрд╝ рд╕реЗ рдмрд╣реБрдд рджреВрд░ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдХрд┐рд╕реА рднреА рддрд╛рд░реАрдЦ рдХрд╛ рдЕрдиреБрдорд╛рди рд▓рдЧрд╛рдирд╛ рдХрдард┐рди рд╣реИ - рдпрд╣ рдУрдкрди рд╕реЛрд░реНрд╕ рдХреА рдкреНрд░рдХреГрддрд┐ рд╣реИред
v2 рдкрд╣рд▓реЗ рд╕реЗ рд╣реА flexbox рдХреЗ рд╕рд╛рде рдмрдврд╝рд┐рдпрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЗрд╕рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдПрдХ рдорд┐рд╢реНрд░рдг рдмрдирд╛рдиреЗ рдХрд╛ рдХреЛрдИ рдХрд╛рд░рдг рдирд╣реАрдВ рд╣реИ, рдЬреИрд╕реЗ рд╣рдордиреЗ рдлреНрд▓реЛрдЯреНрд╕ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдерд╛ред рд╣рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдореЗрдВ рд╕реБрдзрд╛рд░ рдХрд░рдиреЗ рдХрд╛ рдЕрдЪреНрдЫрд╛ рддрд░реАрдХрд╛ рдирд╣реАрдВ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЖрдк рд╣рдорд╛рд░реЗ span()
рдФрд░ gutter()
рдлрд╝рдВрдХреНрд╢рдВрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдлреНрд▓реЗрдХреНрд╕-рдЖрдЗрдЯрдо рдХреЛ рдЧреНрд░рд┐рдб рдореЗрдВ рд╕рдВрд░реЗрдЦрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
.item {
flex: 1 1 span(2);
margin-right: gutter();
}
рдпрд╣ рдЕрднреА рднреА v3 рдореЗрдВ рд╕рдЪ рд╣реЛрдЧрд╛ред
рдирдорд╕реНрддреЗ, рдЪреВрдВрдХрд┐ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдмрдВрдж рд╣реБрдП рдХреБрдЫ рд╕рдордп рд╣реЛ рдЧрдпрд╛ рд╣реИ, рдореИрдВ рдмрд╕ рдлрд┐рд░ рд╕реЗ V3 рдХреА рд╕реНрдерд┐рддрд┐ рдХреА рдЬрд╛рдВрдЪ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛, рд╕рд╛рде рд╣реА рд╕реВрд╕реА рдХреЗ рд╕рд╛рде рдЕрдм рддрдХ рдЖрдкрдиреЗ рдЬреЛ рдЕрджреНрднреБрдд рдХрд╛рдо рдХрд┐рдпрд╛ рд╣реИ, рдЙрд╕рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдзрдиреНрдпрд╡рд╛рдж рднреА рджреЗрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред
@ozke рдмрд╣реБрдд рдХрд░реАрдм
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
v3 рдмреАрдЯрд╛ рд░рд┐рд▓реАрдЬрд╝ рд╕реЗ рдмрд╣реБрдд рджреВрд░ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдХрд┐рд╕реА рднреА рддрд╛рд░реАрдЦ рдХрд╛ рдЕрдиреБрдорд╛рди рд▓рдЧрд╛рдирд╛ рдХрдард┐рди рд╣реИ - рдпрд╣ рдУрдкрди рд╕реЛрд░реНрд╕ рдХреА рдкреНрд░рдХреГрддрд┐ рд╣реИред
v2 рдкрд╣рд▓реЗ рд╕реЗ рд╣реА flexbox рдХреЗ рд╕рд╛рде рдмрдврд╝рд┐рдпрд╛ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдЗрд╕рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдПрдХ рдорд┐рд╢реНрд░рдг рдмрдирд╛рдиреЗ рдХрд╛ рдХреЛрдИ рдХрд╛рд░рдг рдирд╣реАрдВ рд╣реИ, рдЬреИрд╕реЗ рд╣рдордиреЗ рдлреНрд▓реЛрдЯреНрд╕ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдерд╛ред рд╣рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдореЗрдВ рд╕реБрдзрд╛рд░ рдХрд░рдиреЗ рдХрд╛ рдЕрдЪреНрдЫрд╛ рддрд░реАрдХрд╛ рдирд╣реАрдВ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЖрдк рд╣рдорд╛рд░реЗ
span()
рдФрд░gutter()
рдлрд╝рдВрдХреНрд╢рдВрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдлреНрд▓реЗрдХреНрд╕-рдЖрдЗрдЯрдо рдХреЛ рдЧреНрд░рд┐рдб рдореЗрдВ рд╕рдВрд░реЗрдЦрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:рдпрд╣ рдЕрднреА рднреА v3 рдореЗрдВ рд╕рдЪ рд╣реЛрдЧрд╛ред