{"id":2625,"date":"2026-07-17T17:27:56","date_gmt":"2026-07-17T14:27:56","guid":{"rendered":"https:\/\/school.edu-sigma.ru\/blog\/?p=2625"},"modified":"2026-07-17T17:27:56","modified_gmt":"2026-07-17T14:27:56","slug":"flexbox-css","status":"publish","type":"post","link":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/","title":{"rendered":"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS: \u043f\u043e\u043b\u043d\u044b\u0439 \u0433\u0438\u0434 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435"},"content":{"rendered":"<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d<\/h2>\n<p>&nbsp;<\/p>\n<p>\u041f\u043e\u043b\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u2014 Flexible Box Layout Module. Flexbox CSS \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u0414\u043e \u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u0435\u0448\u0430\u043b\u0438 \u044d\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0447\u0435\u0440\u0435\u0437 float, position: absolute \u0438\u043b\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 (display: table). \u0412\u0441\u0435 \u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432: clearfix \u0434\u043b\u044f \u043e\u0431\u0442\u0435\u043a\u0430\u043d\u0438\u044f, \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438 HTML.<\/p>\n<p>Flexbox \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u0435\u043d \u0434\u043b\u044f UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u0444\u043e\u0440\u043c), \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u043d \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u0432\u0434\u043e\u043b\u044c \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438 \u2014 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043b\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439. \u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430, \u0433\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 CSS Grid.<\/p>\n<p><em>\u0425\u043e\u0442\u0438\u0442\u0435 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u043d\u0443\u043b\u044f \u2014 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445? \u041d\u0430 \u043a\u0443\u0440\u0441\u0435 \u00ab\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u0423\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\u00bb \u0448\u043a\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u043f\u0438\u0448\u0443\u0442 HTML, CSS \u0438 JavaScript \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430, \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0432 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442 \u043e\u0431 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438. \u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0430 <\/em><a style=\"color: #2c6fad; text-decoration: none;\" href=\"https:\/\/school.edu-sigma.ru\/\"><em>\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0443\u0440\u0441\u0430<\/em><\/a><em>.<\/em><\/p>\n<h3>\u0418\u0441\u0442\u043e\u0440\u0438\u044f Flexbox: \u043e\u0442 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430 W3C \u0434\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 CSS3<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a Flexible Box Layout Module \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c <a style=\"color: #2c6fad; text-decoration: none;\" href=\"https:\/\/www.w3.org\/TR\/css-flexbox-1\/\">W3C<\/a> \u0432 2009 \u0433\u043e\u0434\u0443. \u0414\u043e 2012 \u0433\u043e\u0434\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0442\u0440\u0438 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430: \u0441\u0442\u0430\u0440\u044b\u0439 2009 \u0433\u043e\u0434\u0430 (display: box), \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 2011 \u0433\u043e\u0434\u0430 (display: flexbox) \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 (display: flex). \u0412 2012 \u0433\u043e\u0434\u0443 \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u043e\u0448\u0451\u043b \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e CSS3, \u0430 \u0432 \u043e\u043a\u0442\u044f\u0431\u0440\u0435 2017 \u0433\u043e\u0434\u0430 W3C \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043b \u0441\u0442\u0430\u0442\u0443\u0441 Candidate Recommendation.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u2014 \u0441\u0432\u044b\u0448\u0435 95%. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f: display: flex \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Chrome, Firefox, Safari, Edge \u0438 Opera \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u0412\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0442\u0430\u0440\u0448\u0435 2016 \u0433\u043e\u0434\u0430.<\/p>\n<h2>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f: \u043e\u0441\u0438, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h2>\n<p>\u0412 Flexbox \u0434\u0432\u0430 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430: <strong>flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/strong> (\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442) \u0438 <strong>flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/strong> (\u0435\u0433\u043e \u043f\u0440\u044f\u043c\u044b\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438). \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0434\u0451\u0442 \u0432 \u0434\u0432\u0443\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445. <strong>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u044c<\/strong> (main axis) \u2014 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0432\u0434\u043e\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. <strong>\u041f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u0430\u044f \u043e\u0441\u044c<\/strong> (cross axis) \u2014 \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440 \u043a \u043d\u0435\u0439. \u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u0435\u0438\u0445 \u043e\u0441\u0435\u0439 \u0437\u0430\u0434\u0430\u0451\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e flex-direction: \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430, \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0441\u0440\u0430\u0437\u0443. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u2014 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<h3>Flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440: \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0438 \u0437\u043e\u043d\u0430 \u0432\u043b\u0438\u044f\u043d\u0438\u044f<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c Flexbox \u0432 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f:<\/p>\n<p>.container {<\/p>\n<p>display: flex; \/* \u0438\u043b\u0438 inline-flex *\/<\/p>\n<p>}<\/p>\n<p>display: flex \u0441\u043e\u0437\u0434\u0430\u0451\u0442 <strong>\u0431\u043b\u043e\u0447\u043d\u044b\u0439<\/strong> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u2014 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0438. display: inline-flex \u2014 <strong>\u0438\u043d\u043b\u0430\u0439\u043d<\/strong>-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440: \u0435\u0433\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u043a\u0430\u043a \u0443 \u0441\u043b\u043e\u0432\u0430 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435. \u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e.<\/p>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441: \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u043b\u0438\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 <strong>\u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432<\/strong> \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0412\u043d\u0443\u043a\u0438 \u0438 \u0433\u043b\u0443\u0431\u0436\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u0431\u043b\u043e\u043a\u0430\u043c\u0438. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS columns \u043d\u0430 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442.<\/p>\n<h3>Flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0447\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/h3>\n<p>\u041f\u0440\u044f\u043c\u044b\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u2014 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 HTML. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c float, clear \u0438 vertical-align \u0434\u043b\u044f \u043d\u0438\u0445 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0434\u043e\u043b\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434 \u0438 \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0428\u0438\u0440\u0438\u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u2014 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043d\u0430\u0447\u0435 \u0447\u0435\u0440\u0435\u0437 flex-grow, flex-basis \u0438\u043b\u0438 \u044f\u0432\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b.<\/p>\n<h2>\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 Flexbox CSS: \u0432\u0441\u0435 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/h2>\n<p>\u0412\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0435 \u0433\u0440\u0443\u043f\u043f\u044b: <strong>8 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/strong> \u2014 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u0441\u0435\u043c\u0438 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u0441\u0440\u0430\u0437\u0443; <strong>6 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/strong> \u2014 \u0437\u0430\u0434\u0430\u044e\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043d\u0438\u0436\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0438, \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044f\u0441\u044c \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e.<\/p>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (8 \u0441\u0432\u043e\u0439\u0441\u0442\u0432)<\/h3>\n<p><strong>flex-direction<\/strong> \u0437\u0430\u0434\u0430\u0451\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: row (\u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e), row-reverse (\u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e), column (\u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437), column-reverse (\u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1408\" height=\"768\" class=\"aligncenter size-full wp-image-2622\" src=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-direction-chetyre-znacheniya-row-column.jpg\" alt=\"\u0427\u0435\u0442\u044b\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f flex-direction: row, row-reverse, column, column-reverse\" srcset=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-direction-chetyre-znacheniya-row-column.jpg 1408w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-direction-chetyre-znacheniya-row-column-300x164.jpg 300w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-direction-chetyre-znacheniya-row-column-1024x559.jpg 1024w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-direction-chetyre-znacheniya-row-column-768x419.jpg 768w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<p><strong>flex-wrap<\/strong> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443: nowrap (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443, \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u043a\u0440\u0430\u0439), wrap (\u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437), wrap-reverse (\u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445).<\/p>\n<p><strong>flex-flow<\/strong> \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 (\u0448\u043e\u0440\u0442\u0445\u0435\u043d\u0434) \u0434\u043b\u044f \u043f\u0430\u0440\u044b flex-direction + flex-wrap. \u041f\u0440\u0438\u043c\u0435\u0440: flex-flow: row wrap. \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u0430\u0436\u0435\u043d: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 direction, \u043f\u043e\u0442\u043e\u043c wrap.<\/p>\n<p><strong>justify-content<\/strong> \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0434\u043e\u043b\u044c <strong>\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438<\/strong>: flex-start (\u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u043e\u0441\u0438, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e), flex-end, center, space-between (\u043a\u0440\u0430\u0439\u043d\u0438\u0435 \u0443 \u0441\u0442\u0435\u043d\u043e\u043a, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e), space-around, space-evenly.<\/p>\n<p><strong>align-items<\/strong> \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0434\u043e\u043b\u044c <strong>\u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438<\/strong> \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0442\u0440\u043e\u043a\u0438: stretch (\u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e), flex-start, flex-end, center, baseline.<\/p>\n<p><strong>align-content<\/strong> \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u043e\u043a \u043f\u0440\u0438 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u043c Flexbox. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0434\u0432\u0443\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e: \u0432\u043a\u043b\u044e\u0447\u0451\u043d flex-wrap: wrap (\u0438\u043b\u0438 wrap-reverse) <strong>\u0438<\/strong> \u0441\u0442\u0440\u043e\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0432\u0435. \u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u043e\u0434\u043d\u0430 \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u0434\u0430\u0451\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u042d\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0430 \u043d\u0435 \u0431\u0430\u0433.<\/p>\n<p><strong>gap<\/strong> (\u0430 \u0442\u0430\u043a\u0436\u0435 row-gap \u0438 column-gap) \u0437\u0430\u0434\u0430\u0451\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u0435\u0436\u0434\u0443 flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 margin: gap \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f \u0443 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043a\u0440\u0430\u0451\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1408\" height=\"768\" class=\"aligncenter size-full wp-image-2618\" src=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/gap-otstupy-mezhdu-elementami-flexbox.jpg\" alt=\"\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e gap \u0432 Flexbox CSS: \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438\" srcset=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/gap-otstupy-mezhdu-elementami-flexbox.jpg 1408w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/gap-otstupy-mezhdu-elementami-flexbox-300x164.jpg 300w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/gap-otstupy-mezhdu-elementami-flexbox-1024x559.jpg 1024w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/gap-otstupy-mezhdu-elementami-flexbox-768x419.jpg 768w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<table style=\"width: 100%; border-collapse: collapse; font-size: 14px;\">\n<thead>\n<tr>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<br \/>\n<\/strong><\/th>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<br \/>\n<\/strong><\/th>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>Default<br \/>\n<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">display<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0410\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044f Flexbox-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u2014<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex-direction<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">row<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex-wrap<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">nowrap<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex-flow<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0434\u043b\u044f direction + wrap<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">row nowrap<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">justify-content<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">flex-start<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">align-items<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">stretch<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">align-content<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a (multi-line)<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">normal<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">gap<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041e\u0442\u0441\u0442\u0443\u043f\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (6 \u0441\u0432\u043e\u0439\u0441\u0442\u0432)<\/h3>\n<p><strong>order<\/strong> \u0437\u0430\u0434\u0430\u0451\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f DOM-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b HTML. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 0. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430: \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 order: -1 \u0432\u0441\u0442\u0430\u043d\u0435\u0442 \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441 order: 0.<\/p>\n<p><strong>flex-grow<\/strong> \u2014 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0440\u0430\u0441\u0442\u044f\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 0 (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f). \u0415\u0441\u043b\u0438 \u0432\u0441\u0435\u043c \u0442\u0440\u0451\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0437\u0430\u0434\u0430\u0442\u044c flex-grow: 1, \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0437\u0430\u0439\u043c\u0443\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0415\u0441\u043b\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u043c\u0443 \u0437\u0430\u0434\u0430\u0442\u044c flex-grow: 2 \u2014 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0432\u0434\u0432\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043a\u0440\u0430\u0439\u043d\u0438\u0435. \u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1408\" height=\"768\" class=\"aligncenter size-full wp-image-2617\" src=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-grow-raspredelenie-mesta-elementy.jpg\" alt=\"Flex-grow \u0432 Flexbox CSS: \u0440\u0430\u0432\u043d\u043e\u0435 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\" srcset=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-grow-raspredelenie-mesta-elementy.jpg 1408w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-grow-raspredelenie-mesta-elementy-300x164.jpg 300w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-grow-raspredelenie-mesta-elementy-1024x559.jpg 1024w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flex-grow-raspredelenie-mesta-elementy-768x419.jpg 768w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<p><strong>flex-shrink<\/strong> \u2014 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0441\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0435 \u043c\u0435\u0441\u0442\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 1 (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e). flex-shrink: 0 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u0441\u0436\u0430\u0442\u0438\u0435.<\/p>\n<p><strong>flex-basis<\/strong> \u2014 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u0418\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0432\u044b\u0448\u0435 width (\u0434\u043b\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f) \u0438 height (\u0434\u043b\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e). \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 auto.<\/p>\n<p><strong>flex<\/strong> \u2014 \u0448\u043e\u0440\u0442\u0445\u0435\u043d\u0434 \u0434\u043b\u044f flex-grow, flex-shrink \u0438 flex-basis \u0441\u0440\u0430\u0437\u0443. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0451\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432: \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0430 \u043d\u0435 \u043f\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c defaults. \u041f\u0440\u0438\u043c\u0435\u0440: flex: 1 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 flex: 1 1 0.<\/p>\n<p><strong>align-self<\/strong> \u2014 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438. \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 align-items \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: auto, flex-start, flex-end, center, baseline, stretch.<\/p>\n<table style=\"width: 100%; border-collapse: collapse; font-size: 14px;\">\n<thead>\n<tr>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<br \/>\n<\/strong><\/th>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<br \/>\n<\/strong><\/th>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>Default<br \/>\n<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">order<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f DOM)<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">0<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex-grow<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0440\u0430\u0441\u0442\u044f\u0436\u0435\u043d\u0438\u044f<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">0<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex-shrink<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0441\u0436\u0430\u0442\u0438\u044f<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">1<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex-basis<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0434\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">auto<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">flex<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 grow + shrink + basis<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">0 1 auto<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">align-self<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">auto<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 Flexbox CSS<\/h2>\n<p>\u0422\u0440\u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u043e\u043a\u043e\u043b\u043e 80% \u0437\u0430\u0434\u0430\u0447, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0435: \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0438 \u0442\u0440\u0451\u0445\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u2014 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443.<\/p>\n<h3>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: margin:auto \u0438 justify-content:center<\/h3>\n<p>Flexbox \u0434\u0430\u0451\u0442 \u0434\u0432\u0430 \u0447\u0438\u0441\u0442\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043e\u0431\u0435\u0438\u043c \u043e\u0441\u044f\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p><strong>\u0421\u043f\u043e\u0441\u043e\u0431 1 \u2014 <\/strong><strong>margin: auto<\/strong><strong>.<\/strong> \u041a\u043e\u0433\u0434\u0430 flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0437\u0430\u0434\u0430\u0442\u044c margin: auto, \u043e\u043d \u043f\u043e\u0433\u043b\u043e\u0449\u0430\u0435\u0442 \u0432\u0441\u0451 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438:<\/p>\n<p>.parent {<\/p>\n<p>display: flex;<\/p>\n<p>height: 300px;<\/p>\n<p>}<\/p>\n<p>.child {<\/p>\n<p>margin: auto;<\/p>\n<p>}<\/p>\n<p><strong>\u0421\u043f\u043e\u0441\u043e\u0431 2 \u2014 <\/strong><strong>justify-content<\/strong><strong> + <\/strong><strong>align-items<\/strong><strong>:<\/strong><\/p>\n<p>.parent {<\/p>\n<p>display: flex;<\/p>\n<p>justify-content: center;<\/p>\n<p>align-items: center;<\/p>\n<p>height: 300px;<\/p>\n<p>}<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u0434\u043e\u0431\u0435\u043d \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u0412\u0442\u043e\u0440\u043e\u0439 \u2014 \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0438\u0445 \u0433\u0440\u0443\u043f\u043f\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u041e\u0431\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u0435\u0437 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<h3>\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a<\/h3>\n<p>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0443 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0445 \u043a\u0440\u0430\u0451\u0432 \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0447\u0430\u0441\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435:<\/p>\n<p>.nav {<\/p>\n<p>display: flex;<\/p>\n<p>justify-content: space-between;<\/p>\n<p>}<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0443\u043d\u043a\u0442 \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u2014 \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443, \u043c\u0435\u0436\u0434\u0443 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u2014 \u0440\u0430\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0438. \u0411\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<p>.cards {<\/p>\n<p>display: flex;<\/p>\n<p>flex-wrap: wrap;<\/p>\n<p>gap: 16px;<\/p>\n<p>}<\/p>\n<p>.card {<\/p>\n<p>flex-grow: 1;<\/p>\n<p>flex-basis: 280px;<\/p>\n<p>}<\/p>\n<p>\u041f\u0440\u0438 \u0441\u0443\u0436\u0435\u043d\u0438\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u2014 280px; \u0434\u0430\u043b\u044c\u0448\u0435 flex-grow: 1 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<h3>Holy Grail Layout: \u0442\u0440\u0451\u0445\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0441 \u0445\u0435\u0434\u0435\u0440\u043e\u043c \u0438 \u0444\u0443\u0442\u0435\u0440\u043e\u043c<\/h3>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u00ab\u0448\u0430\u043f\u043a\u0430 \/ (\u0431\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c + \u043a\u043e\u043d\u0442\u0435\u043d\u0442 + \u0431\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c) \/ \u043f\u043e\u0434\u0432\u0430\u043b\u00bb \u2014 \u043e\u043a\u043e\u043b\u043e 20 \u0441\u0442\u0440\u043e\u043a CSS:<\/p>\n<p>&lt;div class=&#187;wrapper&#187;&gt;<\/p>\n<p>&lt;header&gt;\u0428\u0430\u043f\u043a\u0430&lt;\/header&gt;<\/p>\n<p>&lt;div class=&#187;middle&#187;&gt;<\/p>\n<p>&lt;aside&gt;\u041f\u0430\u043d\u0435\u043b\u044c&lt;\/aside&gt;<\/p>\n<p>&lt;main&gt;\u041a\u043e\u043d\u0442\u0435\u043d\u0442&lt;\/main&gt;<\/p>\n<p>&lt;aside&gt;\u041f\u0430\u043d\u0435\u043b\u044c&lt;\/aside&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;footer&gt;\u041f\u043e\u0434\u0432\u0430\u043b&lt;\/footer&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>.wrapper { display: flex; flex-direction: column; min-height: 100vh; }<\/p>\n<p>.middle { display: flex; flex: 1; }<\/p>\n<p>main { flex: 2 0px; }<\/p>\n<p>aside { flex: 1 0px; }<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e order \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0438\u0445 DOM-\u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u2014 \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0451\u0442 \u0436\u0451\u0441\u0442\u043a\u0443\u044e HTML-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443.<\/p>\n<h2>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0441 Flexbox \u0432 HTML<\/h2>\n<p>\u0421\u0432\u044f\u0437\u043a\u0430 Flexbox \u0438 @media-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u2014 \u043e\u0441\u043d\u043e\u0432\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u043d\u0430 \u043c\u043e\u0431\u0430\u0439\u043b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0443, \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u044f\u0434:<\/p>\n<p>.container {<\/p>\n<p>display: flex;<\/p>\n<p>flex-direction: column;<\/p>\n<p>}<\/p>\n<p>@media (min-width: 768px) {<\/p>\n<p>.container {<\/p>\n<p>flex-direction: row;<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>flex-wrap: wrap \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0417\u0430\u0434\u0430\u0439\u0442\u0435 flex-basis \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u2014 \u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0440\u0438 \u043d\u0435\u0445\u0432\u0430\u0442\u043a\u0435 \u043c\u0435\u0441\u0442\u0430, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430.<\/p>\n<p><strong>Sticky footer<\/strong> \u2014 \u043f\u043e\u0434\u0432\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u0435\u0442 \u043a \u043d\u0438\u0437\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0431\u044a\u0451\u043c\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430:<\/p>\n<p>.wrapper {<\/p>\n<p>display: flex;<\/p>\n<p>flex-direction: column;<\/p>\n<p>min-height: 100vh;<\/p>\n<p>}<\/p>\n<p>main {<\/p>\n<p>flex-grow: 1;<\/p>\n<p>}<\/p>\n<p>flex-grow: 1 \u0443 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u2014 \u043f\u043e\u0434\u0432\u0430\u043b \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043d\u0438\u0437\u0443 \u0431\u0435\u0437 position: fixed \u0438 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0445\u0430\u043a\u043e\u0432.<\/p>\n<p>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0441 \u0442\u0440\u0435\u043c\u044f \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430\u043c\u0438 (\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u0430):<\/p>\n<p>.nav { display: flex; flex-direction: column; }<\/p>\n<p>@media (min-width: 480px) { .nav { flex-direction: row; justify-content: space-around; } }<\/p>\n<p>@media (min-width: 960px) { .nav { justify-content: flex-end; } }<\/p>\n<p>\u041d\u0430 \u0443\u0437\u043a\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u0438\u0434\u0443\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e. \u041d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0435 \u2014 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0441 \u0440\u0430\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430\u043c\u0438. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u2014 \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u044b \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e.<\/p>\n<h2>Flexbox \u0438\u043b\u0438 CSS Grid \u2014 \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1408\" height=\"768\" class=\"aligncenter size-full wp-image-2616\" src=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-vs-grid-infografika-kogda-chto.jpg\" alt=\"Flexbox CSS \u043f\u0440\u043e\u0442\u0438\u0432 CSS Grid: \u0438\u043d\u0444\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c\" srcset=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-vs-grid-infografika-kogda-chto.jpg 1408w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-vs-grid-infografika-kogda-chto-300x164.jpg 300w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-vs-grid-infografika-kogda-chto-1024x559.jpg 1024w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-vs-grid-infografika-kogda-chto-768x419.jpg 768w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435: Flexbox \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0434\u043e\u043b\u044c <strong>\u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438<\/strong> \u2014 \u0440\u044f\u0434\u0430 \u0418\u041b\u0418 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. CSS Grid \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 <strong>\u0434\u0432\u0443\u043c\u044f \u043e\u0441\u044f\u043c\u0438<\/strong> \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e: \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0418 \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c\u0438. \u042d\u0442\u043e \u043d\u0435 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0446\u0438\u044f \u2014 \u043e\u0431\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430. \u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430: Grid \u0437\u0430\u0434\u0430\u0451\u0442 \u043a\u0430\u0440\u043a\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, Flexbox \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u044f\u0447\u0435\u0435\u043a \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0440\u043a\u0430\u0441\u0430.<\/p>\n<p>float \u0438 position \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0434\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f Flexbox \u0438 Grid. \u041e\u0431\u0430 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432 \u2014 clearfix, \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 (display: table) \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 HTML \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043a\u043e\u0434\u0430. \u0412\u0441\u0435 \u0442\u0440\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432.<\/p>\n<table style=\"width: 100%; border-collapse: collapse; font-size: 14px;\">\n<thead>\n<tr>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440<br \/>\n<\/strong><\/th>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>Flexbox<br \/>\n<\/strong><\/th>\n<th style=\"padding: 12px 16px; text-align: left; border: 1px solid #ddd; background: #2c2c2c; font-weight: 500; font-size: 13px; color: #ffffff;\"><strong>CSS Grid<br \/>\n<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">\u0420\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">1D (\u0440\u044f\u0434 \u0438\u043b\u0438 \u0441\u0442\u043e\u043b\u0431\u0435\u0446)<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">2D (\u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b)<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041f\u043e \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">\u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0421\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b, \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0435\u0442\u043a\u0438<\/td>\n<\/tr>\n<tr style=\"background: #f9f9f9;\">\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044f<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u041d\u0438\u0436\u0435<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">\u0412\u044b\u0448\u0435<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5; font-weight: 500;\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">95%+<\/td>\n<td style=\"padding: 12px 16px; border: 1px solid #ddd; line-height: 1.5;\">95%+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b<\/h2>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 display: flex \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0442\u0440\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430: \u0441\u0442\u0430\u0440\u044b\u0439 2009 \u0433\u043e\u0434\u0430 (display: box), \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 2011 \u0433\u043e\u0434\u0430 (display: flexbox) \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441 2012 \u0433\u043e\u0434\u0430 (display: flex). \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0434\u043e 2016 \u0433\u043e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b.<\/p>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 Autoprefixer, PostCSS-\u043f\u043b\u0430\u0433\u0438\u043d (\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443 CSS): \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 -webkit-, -moz-, -ms- \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 .browserslistrc. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u0418\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Flexbox \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a style=\"color: #2c6fad; text-decoration: none;\" href=\"https:\/\/github.com\/philipwalton\/flexbugs\">Flexbugs \u043d\u0430 GitHub<\/a> \u2014 \u0442\u0430\u043c \u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0422\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Flexbox CSS<\/h2>\n<p>Flexbox \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443, \u0430 \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u0447\u0442\u0435\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<p><strong>Chrome DevTools<\/strong> (\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Chrome): \u043d\u0430\u0436\u043c\u0438\u0442\u0435 F12, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Elements \u0438 \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 display: flex \u2014 \u0440\u044f\u0434\u043e\u043c \u0441 \u043d\u0438\u043c \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u043e\u043a flex. \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u043e \u043d\u0435\u043c\u0443 \u2014 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b flex-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0448\u0442\u0440\u0438\u0445\u043e\u0432\u043a\u0443, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0443\u044e gap. \u0412\u043a\u043b\u0430\u0434\u043a\u0430 <strong>Layout<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438; \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 <strong>Styles<\/strong> \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <strong>Flexbox Editor<\/strong> \u2014 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u044f\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u0435\u0437 \u043f\u0440\u0430\u0432\u043a\u0438 \u043a\u043e\u0434\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1408\" height=\"768\" class=\"aligncenter size-full wp-image-2614\" src=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/chrome-devtools-flex-panel-redaktor.jpg\" alt=\"Chrome DevTools: \u0437\u043d\u0430\u0447\u043e\u043a flex \u0438 \u043f\u0430\u043d\u0435\u043b\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 Flexbox CSS\" srcset=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/chrome-devtools-flex-panel-redaktor.jpg 1408w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/chrome-devtools-flex-panel-redaktor-300x164.jpg 300w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/chrome-devtools-flex-panel-redaktor-1024x559.jpg 1024w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/chrome-devtools-flex-panel-redaktor-768x419.jpg 768w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<p><a style=\"color: #2c6fad; text-decoration: none;\" href=\"https:\/\/flexboxfroggy.com\/\">Flexbox Froggy<\/a> \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0438\u0433\u0440\u0430: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044f\u0433\u0443\u0448\u0435\u043a \u043d\u0430 \u043b\u0438\u0441\u0442\u044c\u044f \u043b\u043e\u0442\u043e\u0441\u0430. 28 \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0441 \u043d\u0430\u0440\u0430\u0441\u0442\u0430\u044e\u0449\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e, \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e, \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043d \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439. <strong>Flexbox Defense<\/strong> \u2014 \u043f\u043e\u0445\u043e\u0436\u0430\u044f \u0438\u0433\u0440\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0431\u0430\u0448\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0449\u0438\u0442\u044b, \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435. <strong>Flex Box Adventure<\/strong> \u2014 24 \u043c\u0438\u0441\u0441\u0438\u0438 \u0441 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u043c \u0410\u0440\u0442\u0443\u0440\u043e\u043c, \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1408\" height=\"768\" class=\"aligncenter size-full wp-image-2613\" src=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-froggy-igra-urovni-css.jpg\" alt=\"Flexbox Froggy \u2014 \u0438\u0433\u0440\u0430 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f CSS Flexbox: \u043b\u044f\u0433\u0443\u0448\u043a\u0430 \u043d\u0430 \u043b\u0438\u0441\u0442\u0430\u0445\" srcset=\"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-froggy-igra-urovni-css.jpg 1408w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-froggy-igra-urovni-css-300x164.jpg 300w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-froggy-igra-urovni-css-1024x559.jpg 1024w, https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-froggy-igra-urovni-css-768x419.jpg 768w\" sizes=\"auto, (max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<p><strong>MDN Web Docs<\/strong> \u2014 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430 \u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 Flexbox.<\/p>\n<h2>\u0427\u0430\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/h2>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox \u0432 CSS?<\/h3>\n<p>Flexbox CSS (Flexible Box Layout Module \u2014 \u0433\u0438\u0431\u043a\u0430\u044f \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c) \u2014 \u043c\u043e\u0434\u0443\u043b\u044c CSS3 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u0440\u0438\u043d\u044f\u0442 \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u043e\u043c W3C \u0432 2012 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c CSS3, \u0441\u0442\u0430\u0442\u0443\u0441 Candidate Recommendation \u2014 \u0441 \u043e\u043a\u0442\u044f\u0431\u0440\u044f 2017 \u0433\u043e\u0434\u0430. \u0410\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c display: flex.<\/p>\n<h3>\u0427\u0435\u043c display:flex \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 display:inline-flex?<\/h3>\n<p>\u041e\u0431\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 Flexbox \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u2014 \u0432 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: display: flex \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 (\u0431\u043b\u043e\u0447\u043d\u044b\u0439), display: inline-flex \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e (\u0438\u043d\u043b\u0430\u0439\u043d), \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0432 \u0442\u0435\u043a\u0441\u0442\u0435.<\/p>\n<h3>\u0427\u0435\u043c justify-content \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 align-items?<\/h3>\n<p>justify-content \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0434\u043e\u043b\u044c <strong>\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438<\/strong> (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c). align-items \u2014 \u0432\u0434\u043e\u043b\u044c <strong>\u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438<\/strong> (\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c \u043f\u0440\u0438 flex-direction: row). \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 align-self: \u043e\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 align-items \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430.<\/p>\n<h3>\u041a\u0430\u043a \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438?<\/h3>\n<p>\u0414\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430. \u041f\u0435\u0440\u0432\u044b\u0439: \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 display: flex, \u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u2014 margin: auto. \u0412\u0442\u043e\u0440\u043e\u0439: \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 display: flex; justify-content: center; align-items: center. \u041f\u0435\u0440\u0432\u044b\u0439 \u0443\u0434\u043e\u0431\u0435\u043d \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 align-content?<\/h3>\n<p>align-content \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u0432\u0443\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439: \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u2014 flex-wrap: wrap \u0438\u043b\u0438 wrap-reverse \u2014 <strong>\u0438<\/strong> \u0441\u0442\u0440\u043e\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0432\u0435. \u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u043e\u0434\u043d\u0430, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u0434\u0430\u0451\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u042d\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 W3C, \u0430 \u043d\u0435 \u0431\u0430\u0433.<\/p>\n<h3>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 flex-grow \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d?<\/h3>\n<p>flex-grow \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0443\u044e \u0434\u043e\u043b\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. flex-grow: 1 \u0443 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u2014 \u043c\u0435\u0441\u0442\u043e \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043f\u043e\u0440\u043e\u0432\u043d\u0443. \u0415\u0441\u043b\u0438 \u043e\u0434\u043d\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u0442\u044c flex-grow: 2 \u2014 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0432\u0434\u0432\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0441 flex-grow: 1. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 0 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h3>\u0427\u0435\u043c Flexbox \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 CSS Grid?<\/h3>\n<p>Flexbox \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438 \u2014 \u0440\u044f\u0434\u0443\u0438\u043b\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0443. CSS Grid \u2014 \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e: \u0441\u0442\u0440\u043e\u043a\u0430\u043c \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c. \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: Flexbox \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f, Grid \u0434\u043b\u044f \u043a\u0430\u0440\u043a\u0430\u0441\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u044f\u0432\u043d\u043e\u0439 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u043e\u0439. \u041e\u043d\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0442, \u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox Froggy \u0438 \u043a\u0430\u043a \u0441 \u043d\u0438\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f?<\/h3>\n<p><a style=\"color: #2c6fad; text-decoration: none;\" href=\"https:\/\/flexboxfroggy.com\/\">Flexbox Froggy<\/a> \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0438\u0433\u0440\u0430, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044f\u0433\u0443\u0448\u0435\u043a \u043d\u0430 \u043b\u0438\u0441\u0442\u044c\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 Flexbox. 28 \u0443\u0440\u043e\u0432\u043d\u0435\u0439, \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e, \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c. \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u2014 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440.<\/p>\n<h3>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0431\u0435\u0437 media queries?<\/h3>\n<p>\u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 display: flex; flex-wrap: wrap \u0438 gap, \u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u2014 flex-grow: 1 \u0438 flex-basis \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 280px). \u041f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430.<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Autoprefixer \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Flexbox?<\/h3>\n<p>Autoprefixer \u2014 PostCSS-\u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b (-webkit-, -moz-, -ms-) \u043a CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u042d\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0434\u043b\u044f Sass (\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 CSS) \u2014 @mixin \u0441 \u0440\u0443\u0447\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432.<\/p>\n<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/\"\n  },\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox \u0432 CSS?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Flexbox CSS (Flexible Box Layout Module \u2014 \u0433\u0438\u0431\u043a\u0430\u044f \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c) \u2014 \u043c\u043e\u0434\u0443\u043b\u044c CSS3 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u0440\u0438\u043d\u044f\u0442 \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u043e\u043c W3C \u0432 2012 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c CSS3, \u0441\u0442\u0430\u0442\u0443\u0441 Candidate Recommendation \u2014 \u0441 \u043e\u043a\u0442\u044f\u0431\u0440\u044f 2017 \u0433\u043e\u0434\u0430. \u0410\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c display: flex.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u0427\u0435\u043c display:flex \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 display:inline-flex?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"\u041e\u0431\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 Flexbox \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u2014 \u0432 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: display: flex \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 (\u0431\u043b\u043e\u0447\u043d\u044b\u0439), display: inline-flex \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e (\u0438\u043d\u043b\u0430\u0439\u043d), \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0432 \u0442\u0435\u043a\u0441\u0442\u0435.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u0427\u0435\u043c justify-content \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 align-items?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"justify-content \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0434\u043e\u043b\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u2014 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c). align-items \u2014 \u0432\u0434\u043e\u043b\u044c \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 (\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c \u043f\u0440\u0438 flex-direction: row). \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 align-self: \u043e\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 align-items \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u041a\u0430\u043a \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"\u0414\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430. \u041f\u0435\u0440\u0432\u044b\u0439: \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 display: flex, \u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u2014 margin: auto. \u0412\u0442\u043e\u0440\u043e\u0439: \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 display: flex; justify-content: center; align-items: center. \u041f\u0435\u0440\u0432\u044b\u0439 \u0443\u0434\u043e\u0431\u0435\u043d \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u043a\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 align-content?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"align-content \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u0432\u0443\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439: \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u2014 flex-wrap: wrap \u0438\u043b\u0438 wrap-reverse \u2014 \u0438 \u0441\u0442\u0440\u043e\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0432\u0435. \u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u043e\u0434\u043d\u0430, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u0434\u0430\u0451\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430. \u042d\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 W3C, \u0430 \u043d\u0435 \u0431\u0430\u0433.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 flex-grow \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"flex-grow \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0443\u044e \u0434\u043e\u043b\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. flex-grow: 1 \u0443 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u2014 \u043c\u0435\u0441\u0442\u043e \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043f\u043e\u0440\u043e\u0432\u043d\u0443. \u0415\u0441\u043b\u0438 \u043e\u0434\u043d\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u0442\u044c flex-grow: 2 \u2014 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0432\u0434\u0432\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043e\u0441\u0435\u0434\u0435\u0439 \u0441 flex-grow: 1. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 0 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u0427\u0435\u043c Flexbox \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 CSS Grid?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Flexbox \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043e\u0441\u0438 \u2014 \u0440\u044f\u0434\u0443\u0438\u043b\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0443. CSS Grid \u2014 \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e: \u0441\u0442\u0440\u043e\u043a\u0430\u043c \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c. \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: Flexbox \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f, Grid \u0434\u043b\u044f \u043a\u0430\u0440\u043a\u0430\u0441\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u044f\u0432\u043d\u043e\u0439 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u043e\u0439. \u041e\u043d\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0442, \u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox Froggy \u0438 \u043a\u0430\u043a \u0441 \u043d\u0438\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Flexbox Froggy \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u0438\u0433\u0440\u0430, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044f\u0433\u0443\u0448\u0435\u043a \u043d\u0430 \u043b\u0438\u0441\u0442\u044c\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 Flexbox. 28 \u0443\u0440\u043e\u0432\u043d\u0435\u0439, \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e, \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c. \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u2014 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0431\u0435\u0437 media queries?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"\u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 display: flex; flex-wrap: wrap \u0438 gap, \u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u2014 flex-grow: 1 \u0438 flex-basis \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 280px). \u041f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u0417\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Autoprefixer \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Flexbox?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Autoprefixer \u2014 PostCSS-\u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b (-webkit-, -moz-, -ms-) \u043a CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u042d\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0434\u043b\u044f Sass (\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 CSS) \u2014 @mixin \u0441 \u0440\u0443\u0447\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432.\"\n      }\n    }\n  ]\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"singleBlog__desc\">Flexbox CSS (Flexible Box Layout Module \u2014 \u0433\u0438\u0431\u043a\u0430\u044f \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c) \u2014 \u043c\u043e\u0434\u0443\u043b\u044c CSS3 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442 W3C, \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u2014 display: flex \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435: \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e \u0432\u0441\u0435\u043c 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 CSS Grid \u0438 \u043b\u0443\u0447\u0448\u0438\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438.<\/p>\n","protected":false},"author":1,"featured_media":2623,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"cta-position":"main","cta-status":false,"cta-priority":50,"cta-tags":"","id-post-1":0,"id-post-2":0,"id-post-3":0,"footnotes":""},"categories":[19],"tags":[],"class_list":["post-2625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-19"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"admintgu\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"ru_RU\" \/>\n\t\t<meta property=\"og:site_name\" content=\"\u041f\u0440\u043e\u0435\u043a\u0442 \u041a\u043e\u0434 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430\" \/>\n\t\t<meta property=\"og:description\" content=\"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-07-17T14:27:56+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-07-17T14:27:56+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#blogposting\",\"name\":\"Flexbox CSS: \\u0441\\u0432\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430, \\u043f\\u0440\\u0438\\u043c\\u0435\\u0440\\u044b \\u0438 \\u0448\\u043f\\u0430\\u0440\\u0433\\u0430\\u043b\\u043a\\u0430\",\"headline\":\"\\u0427\\u0442\\u043e \\u0442\\u0430\\u043a\\u043e\\u0435 Flexbox CSS: \\u043f\\u043e\\u043b\\u043d\\u044b\\u0439 \\u0433\\u0438\\u0434 \\u043f\\u043e \\u0441\\u0432\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430\\u043c, \\u043f\\u0440\\u0438\\u043c\\u0435\\u0440\\u0430\\u043c \\u0438 \\u0448\\u043f\\u0430\\u0440\\u0433\\u0430\\u043b\\u043a\\u0435\",\"author\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/author\\\/admintgu\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/school.edu-sigma.ru\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/flexbox-aktivaciya-3-shaga-display-flex.jpg\",\"width\":1408,\"height\":768,\"caption\":\"\\u0422\\u0440\\u0438 \\u0448\\u0430\\u0433\\u0430 \\u0430\\u043a\\u0442\\u0438\\u0432\\u0430\\u0446\\u0438\\u0438 Flexbox CSS: HTML, display flex, \\u0440\\u0435\\u0437\\u0443\\u043b\\u044c\\u0442\\u0430\\u0442\"},\"datePublished\":\"2026-07-17T17:27:56+03:00\",\"dateModified\":\"2026-07-17T17:27:56+03:00\",\"inLanguage\":\"ru-RU\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#webpage\"},\"articleSection\":\"\\u0412\\u0435\\u0431-\\u0440\\u0430\\u0437\\u0440\\u0430\\u0431\\u043e\\u0442\\u043a\\u0430\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/category\\\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\\\/#listItem\",\"name\":\"\\u0412\\u0435\\u0431-\\u0440\\u0430\\u0437\\u0440\\u0430\\u0431\\u043e\\u0442\\u043a\\u0430\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/category\\\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\\\/#listItem\",\"position\":2,\"name\":\"\\u0412\\u0435\\u0431-\\u0440\\u0430\\u0437\\u0440\\u0430\\u0431\\u043e\\u0442\\u043a\\u0430\",\"item\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/category\\\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#listItem\",\"name\":\"\\u0427\\u0442\\u043e \\u0442\\u0430\\u043a\\u043e\\u0435 Flexbox CSS: \\u043f\\u043e\\u043b\\u043d\\u044b\\u0439 \\u0433\\u0438\\u0434 \\u043f\\u043e \\u0441\\u0432\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430\\u043c, \\u043f\\u0440\\u0438\\u043c\\u0435\\u0440\\u0430\\u043c \\u0438 \\u0448\\u043f\\u0430\\u0440\\u0433\\u0430\\u043b\\u043a\\u0435\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#listItem\",\"position\":3,\"name\":\"\\u0427\\u0442\\u043e \\u0442\\u0430\\u043a\\u043e\\u0435 Flexbox CSS: \\u043f\\u043e\\u043b\\u043d\\u044b\\u0439 \\u0433\\u0438\\u0434 \\u043f\\u043e \\u0441\\u0432\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430\\u043c, \\u043f\\u0440\\u0438\\u043c\\u0435\\u0440\\u0430\\u043c \\u0438 \\u0448\\u043f\\u0430\\u0440\\u0433\\u0430\\u043b\\u043a\\u0435\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/category\\\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\\\/#listItem\",\"name\":\"\\u0412\\u0435\\u0431-\\u0440\\u0430\\u0437\\u0440\\u0430\\u0431\\u043e\\u0442\\u043a\\u0430\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/#organization\",\"name\":\"\\u041f\\u0440\\u043e\\u0435\\u043a\\u0442 \\u041a\\u043e\\u0434 \\u0431\\u0443\\u0434\\u0443\\u0449\\u0435\\u0433\\u043e\",\"url\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/author\\\/admintgu\\\/#author\",\"url\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/author\\\/admintgu\\\/\",\"name\":\"admintgu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4af8eb1436e15a42550f5f114850884ef54c4368cd86e96a01976abc221195fe?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"admintgu\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#webpage\",\"url\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/\",\"name\":\"Flexbox CSS: \\u0441\\u0432\\u043e\\u0439\\u0441\\u0442\\u0432\\u0430, \\u043f\\u0440\\u0438\\u043c\\u0435\\u0440\\u044b \\u0438 \\u0448\\u043f\\u0430\\u0440\\u0433\\u0430\\u043b\\u043a\\u0430\",\"description\":\"Flexbox CSS \\u2014 CSS3-\\u043c\\u043e\\u0434\\u0443\\u043b\\u044c \\u0434\\u043b\\u044f \\u0430\\u0434\\u0430\\u043f\\u0442\\u0438\\u0432\\u043d\\u043e\\u0439 \\u0432\\u0451\\u0440\\u0441\\u0442\\u043a\\u0438. 14 \\u0441\\u0432\\u043e\\u0439\\u0441\\u0442\\u0432 \\u0441 \\u043f\\u0440\\u0438\\u043c\\u0435\\u0440\\u0430\\u043c\\u0438 \\u043a\\u043e\\u0434\\u0430, \\u0448\\u043f\\u0430\\u0440\\u0433\\u0430\\u043b\\u043a\\u0430, \\u0441\\u0440\\u0430\\u0432\\u043d\\u0435\\u043d\\u0438\\u0435 \\u0441 Grid \\u0438 \\u0431\\u0435\\u0441\\u043f\\u043b\\u0430\\u0442\\u043d\\u044b\\u0435 \\u0442\\u0440\\u0435\\u043d\\u0430\\u0436\\u0451\\u0440\\u044b \\u0434\\u043b\\u044f \\u0434\\u0435\\u0442\\u0435\\u0439 \\u0438 \\u0432\\u0437\\u0440\\u043e\\u0441\\u043b\\u044b\\u0445.\",\"inLanguage\":\"ru-RU\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/author\\\/admintgu\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/author\\\/admintgu\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/school.edu-sigma.ru\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/flexbox-aktivaciya-3-shaga-display-flex.jpg\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#mainImage\",\"width\":1408,\"height\":768,\"caption\":\"\\u0422\\u0440\\u0438 \\u0448\\u0430\\u0433\\u0430 \\u0430\\u043a\\u0442\\u0438\\u0432\\u0430\\u0446\\u0438\\u0438 Flexbox CSS: HTML, display flex, \\u0440\\u0435\\u0437\\u0443\\u043b\\u044c\\u0442\\u0430\\u0442\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/flexbox-css\\\/#mainImage\"},\"datePublished\":\"2026-07-17T17:27:56+03:00\",\"dateModified\":\"2026-07-17T17:27:56+03:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/\",\"name\":\"\\u041f\\u0440\\u043e\\u0435\\u043a\\u0442 \\u041a\\u043e\\u0434 \\u0431\\u0443\\u0434\\u0443\\u0449\\u0435\\u0433\\u043e\",\"inLanguage\":\"ru-RU\",\"publisher\":{\"@id\":\"https:\\\/\\\/school.edu-sigma.ru\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430","description":"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.","canonical_url":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#blogposting","name":"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430","headline":"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS: \u043f\u043e\u043b\u043d\u044b\u0439 \u0433\u0438\u0434 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435","author":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/author\/admintgu\/#author"},"publisher":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-aktivaciya-3-shaga-display-flex.jpg","width":1408,"height":768,"caption":"\u0422\u0440\u0438 \u0448\u0430\u0433\u0430 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 Flexbox CSS: HTML, display flex, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442"},"datePublished":"2026-07-17T17:27:56+03:00","dateModified":"2026-07-17T17:27:56+03:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#webpage"},"isPartOf":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#webpage"},"articleSection":"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430"},{"@type":"BreadcrumbList","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog#listItem","position":1,"name":"Home","item":"https:\/\/school.edu-sigma.ru\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog\/category\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\/#listItem","name":"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430"}},{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog\/category\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\/#listItem","position":2,"name":"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","item":"https:\/\/school.edu-sigma.ru\/blog\/category\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\/","nextItem":{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#listItem","name":"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS: \u043f\u043e\u043b\u043d\u044b\u0439 \u0433\u0438\u0434 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435"},"previousItem":{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#listItem","position":3,"name":"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS: \u043f\u043e\u043b\u043d\u044b\u0439 \u0433\u0438\u0434 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435","previousItem":{"@type":"ListItem","@id":"https:\/\/school.edu-sigma.ru\/blog\/category\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\/#listItem","name":"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430"}}]},{"@type":"Organization","@id":"https:\/\/school.edu-sigma.ru\/blog\/#organization","name":"\u041f\u0440\u043e\u0435\u043a\u0442 \u041a\u043e\u0434 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e","url":"https:\/\/school.edu-sigma.ru\/blog\/"},{"@type":"Person","@id":"https:\/\/school.edu-sigma.ru\/blog\/author\/admintgu\/#author","url":"https:\/\/school.edu-sigma.ru\/blog\/author\/admintgu\/","name":"admintgu","image":{"@type":"ImageObject","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/4af8eb1436e15a42550f5f114850884ef54c4368cd86e96a01976abc221195fe?s=96&d=mm&r=g","width":96,"height":96,"caption":"admintgu"}},{"@type":"WebPage","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#webpage","url":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/","name":"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430","description":"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#breadcrumblist"},"author":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/author\/admintgu\/#author"},"creator":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/author\/admintgu\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/school.edu-sigma.ru\/wp-content\/uploads\/2026\/07\/flexbox-aktivaciya-3-shaga-display-flex.jpg","@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#mainImage","width":1408,"height":768,"caption":"\u0422\u0440\u0438 \u0448\u0430\u0433\u0430 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 Flexbox CSS: HTML, display flex, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442"},"primaryImageOfPage":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/#mainImage"},"datePublished":"2026-07-17T17:27:56+03:00","dateModified":"2026-07-17T17:27:56+03:00"},{"@type":"WebSite","@id":"https:\/\/school.edu-sigma.ru\/blog\/#website","url":"https:\/\/school.edu-sigma.ru\/blog\/","name":"\u041f\u0440\u043e\u0435\u043a\u0442 \u041a\u043e\u0434 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/school.edu-sigma.ru\/blog\/#organization"}}]},"og:locale":"ru_RU","og:site_name":"\u041f\u0440\u043e\u0435\u043a\u0442 \u041a\u043e\u0434 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e -","og:type":"article","og:title":"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430","og:description":"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.","og:url":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/","article:published_time":"2026-07-17T14:27:56+00:00","article:modified_time":"2026-07-17T14:27:56+00:00","twitter:card":"summary_large_image","twitter:title":"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430","twitter:description":"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445."},"aioseo_meta_data":{"post_id":"2625","title":"Flexbox CSS: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430","description":"Flexbox CSS \u2014 CSS3-\u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438. 14 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 Grid \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u043d\u0430\u0436\u0451\u0440\u044b \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-07-17 11:14:18","updated":"2026-07-17 15:12:55","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/school.edu-sigma.ru\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/school.edu-sigma.ru\/blog\/category\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\/\" title=\"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\">\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS: \u043f\u043e\u043b\u043d\u044b\u0439 \u0433\u0438\u0434 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/school.edu-sigma.ru\/blog"},{"label":"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","link":"https:\/\/school.edu-sigma.ru\/blog\/category\/%d0%b2%d0%b5%d0%b1-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0\/"},{"label":"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox CSS: \u043f\u043e\u043b\u043d\u044b\u0439 \u0433\u0438\u0434 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c \u0438 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435","link":"https:\/\/school.edu-sigma.ru\/blog\/flexbox-css\/"}],"_links":{"self":[{"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/posts\/2625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/comments?post=2625"}],"version-history":[{"count":4,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/posts\/2625\/revisions"}],"predecessor-version":[{"id":2629,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/posts\/2625\/revisions\/2629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/media\/2623"}],"wp:attachment":[{"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/media?parent=2625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/categories?post=2625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/school.edu-sigma.ru\/blog\/wp-json\/wp\/v2\/tags?post=2625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}