{"id":313373,"date":"2020-11-18T15:00:52","date_gmt":"2020-11-18T15:00:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=313373"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=313373","title":{"rendered":"\u041f\u043e\u043b\u043d\u043e\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e-\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e Flexbox \u0438 Grid + \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/to\/cr\/o1\/tocro1luku9caqtlqptb22zhr-u.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u043e\u043b\u043d\u043e\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e-\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c CSS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 Flexbox \u0438 Grid.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438: <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" rel=\"nofollow\">A Complete Guide to Flexbox<\/a>, <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" rel=\"nofollow\">A Complete Guide to Grid<\/a>.<\/p>\n<p>  \u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0430\u0441 \u0436\u0434\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440\u0430 \u043f\u043e Flexbox.<\/p>\n<p>  \u0411\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0439.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<ul>\n<li><a href=\"#flex\">Flexbox<\/a><\/li>\n<li>\n<ul>\n<li><a href=\"#flex-term\">\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/a><\/li>\n<li><a href=\"#flex-container\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/a><\/li>\n<li><a href=\"#flex-items\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#flex-examples\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><\/li>\n<li><a href=\"#flex-resources\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#grid\">Grid<\/a><\/li>\n<li>\n<ul>\n<li><a href=\"#grid-term\">\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/a><\/li>\n<li><a href=\"#grid-example\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/li>\n<li><a href=\"#grid-container\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/a><\/li>\n<li><a href=\"#grid-elements\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#grid-resources\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#tutorial\">\u0422\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/a><\/li>\n<\/ul>\n<p>  <\/div>\n<\/p><\/div>\n<p>  <a name=\"habracut\"><\/a><br \/>  <a name=\"flex\"><\/a><\/p>\n<h1>Flexbox (Flex, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u0424\u043b\u0435\u043a\u0441)<\/h1>\n<p>  <a name=\"flex-term\"><\/a><\/p>\n<h3>\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/h3>\n<p>  \u0424\u043b\u0435\u043a\u0441 \u2014 \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043d\u043e \u0446\u0435\u043b\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 (\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u043c\u0443 \u043a\u0430\u043a \u00ab\u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u00bb (flex container, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440)), \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c (\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c \u043a\u0430\u043a \u00ab\u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\u00bb (flex items, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b)).<\/p>\n<p>  \u00ab\u041e\u0431\u044b\u0447\u043d\u044b\u0439\u00bb \u043c\u0430\u043a\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043f\u043e\u0442\u043e\u043a\u0435 \u0438\u0437 \u0431\u043b\u043e\u0447\u043d\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0444\u043b\u0435\u043a\u0441-\u043c\u0430\u043a\u0435\u0442 \u2014 \u043d\u0430 \u00ab\u0444\u043b\u0435\u043a\u0441-\u043f\u043e\u0442\u043e\u043a\u0435\u00bb (flex-flow directions). \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0438\u0434\u0435\u0438, \u043b\u0435\u0436\u0430\u0449\u0438\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u043b\u0435\u043a\u0441-\u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tk\/02\/c0\/tk02c0vhsgae76m8m5ajulen3nm.png\"><\/p>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u0434\u043e\u043b\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 (\u0433\u043b\u0430\u0432\u043d\u043e\u0439) \u043e\u0441\u0438 (main axis) (\u043e\u0442 main-start \u0434\u043e main-end) \u0438\u043b\u0438 \u0432\u0434\u043e\u043b\u044c \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 (cross axis) (\u043e\u0442 cross-start \u0434\u043e cross-end).<\/p>\n<ul>\n<li>\u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043e\u0441\u044c \u2014 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043e\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043e\u0441\u044c, \u0432\u0434\u043e\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u041e\u043d\u0430 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439; \u044d\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abflex-direction\u00bb (\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u043c. \u043d\u0438\u0436\u0435)<\/li>\n<li>main-start | main-end \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043e\u0442 main-start \u0434\u043e main-end<\/li>\n<li>\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (main size) \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f (main dimension), \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li>\n<li>\u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u0430\u044f \u043e\u0441\u044c \u2014 \u043e\u0441\u044c, \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439. \u0415\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438<\/li>\n<li>cross-start | cross-end \u2014 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043e\u0442 cross-end \u0434\u043e cross-start<\/li>\n<li>\u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (cross size) \u2014 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oz\/nc\/3w\/oznc3wyfh7q2djnvti0wqe9r15c.png\"><\/p>\n<p>  <a name=\"flex-container\"><\/a><\/p>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h3>\n<p>  <\/p>\n<h6>display<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440; \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041e\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u00ab\u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u00bb \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u044f\u043c\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"css\">.container {   display: flex; \/* \u0438\u043b\u0438 inline-flex *\/ } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS-\u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.<\/p>\n<h6>flex-direction (\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pr\/v4\/y7\/prv4y7gdj6r53nmoqjalnqtursc.png\"><\/p>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043e\u0441\u044c, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u0424\u043b\u0435\u043a\u0441 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 (\u0431\u0435\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0449\u0438\u0445 \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043e\u0431\u0435\u0440\u0442\u043e\u043a) \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445, \u043b\u0438\u0431\u043e \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445.<\/p>\n<pre><code class=\"css\">.container {   flex-direction: row | row-reverse | column | column-reverse; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>row (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e): \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u0432 ltr \u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e \u0432 rtl<\/li>\n<li>row-reverse: \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 row \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 \u2014 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e \u0432 ltr \u0438\u043b\u0438 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e \u0432 rtl<\/li>\n<li>column: \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e row, \u043d\u043e \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437<\/li>\n<li>column-reverse: \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e row-reverse, \u043d\u043e \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<h6>flex-wrap (\u043f\u0435\u0440\u0435\u043d\u043e\u0441, \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/n8\/yj\/rp\/n8yjrph0w-s4gl6fduoeetiaoxe.png\"><\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"css\">.container {   flex-wrap: nowrap | wrap | wrap-reverse; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>nowrap (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e): \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435<\/li>\n<li>wrap: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437<\/li>\n<li>wrap-reverse: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<h6>flex-flow (\u043f\u043e\u0442\u043e\u043a)<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f flex-direction \u0438 flex-wrap, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438 \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u0443\u044e \u043e\u0441\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f row nowrap.<\/p>\n<pre><code class=\"css\">.container {   flex-flow: column wrap; } <\/code><\/pre>\n<p>  <\/p>\n<h6>justify-content (\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bj\/ql\/g9\/bjqlg9au0ckixnqegfdwxt0p6me.png\"><\/p>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0434\u043e\u043b\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438. \u041e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0438\u043b\u0438 \u0433\u0438\u0431\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0434\u043e\u0441\u0442\u0438\u0433\u0448\u0438\u043c\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u041e\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">.container {   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>flex-start (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e): \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432\u0434\u043e\u043b\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438<\/li>\n<li>flex-end: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<li>start: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abwriting-mode\u00bb (\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u044c\u043c\u0430)<\/li>\n<li>end: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abwriting-mode\u00bb<\/li>\n<li>left: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430; \u0431\u0435\u0437 flex-direction \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e start<\/li>\n<li>right: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430; \u0431\u0435\u0437 flex-direction \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e start<\/li>\n<li>center: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>space-between: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u2014 \u0432 \u043a\u043e\u043d\u0446\u0435, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u043c\u0443\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0443<\/li>\n<li>space-around: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u043f\u043e \u043a\u0440\u0430\u044f\u043c. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043a\u0440\u0430\u044f\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c; \u044d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043f\u043e \u043e\u0431\u0435\u0438\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043e\u0442 \u043a\u0440\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043d\u043e \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438 \u0434\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li>\n<li>space-evenly: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u043b\u044e\u0431\u044b\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u043b\u043e\u0441\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c<\/li>\n<\/ul>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f. \u0421\u0430\u043c\u044b\u043c\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f flex-start, flex-end \u0438 center.<\/p>\n<p>  \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432 \u00absafe\u00bb \u0438 \u00abunsafe\u00bb, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 safe \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n<h6>align-items (\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/i7\/jk\/ma\/i7jkma1humuzexyflyia7rhdf9o.png\"><\/p>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u0434\u043e\u043b\u044c \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 justify-content \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 (\u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439).<\/p>\n<pre><code class=\"css\">.container {   align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>stretch (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e): \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u0445 min-width\/max-width)<\/li>\n<li>flex-start \/ start \/ self-start: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438. \u0420\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b \u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 flex-direction \u0438\u043b\u0438 writing-mode<\/li>\n<li>flex-end \/ end \/ self-end: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438. \u0420\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b \u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 flex-direction \u0438\u043b\u0438 writing-mode<\/li>\n<li>center: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>baseline: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0434\u043e\u043b\u044c \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438<\/li>\n<\/ul>\n<p>  \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430-\u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u00absafe\u00bb \u0438 \u00abunsafe\u00bb \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c (\u043d\u0435\u0434\u043e\u0441\u044f\u0433\u0430\u0435\u043c\u044b\u043c, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).<\/p>\n<h6>align-content (\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jr\/3y\/2-\/jr3y2-0tpzbs7_ip2kra-fzfnri.png\"><\/p>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432\u0434\u043e\u043b\u044c \u043f\u043e\u043f\u0435\u0440\u0435\u0447\u043d\u043e\u0439 \u043e\u0441\u0438. \u041e\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 justify-content, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u0434\u043e\u043b\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abflex-wrap\u00bb \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abwrap\u00bb \u0438\u043b\u0438 \u00abwrap-reverse\u00bb. \u0412 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043a\u043e\u0433\u0434\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abflex-wrap\u00bb \u0438\u043c\u0435\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abno-wrap\u00bb) \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 align-content \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"css\">.container {   align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>normal (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e): \u0441\u0442\u0440\u043e\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043f\u043e\u0437\u0438\u0446\u0438\u044f\u0445<\/li>\n<li>flex-start \/ start: \u0441\u0442\u0440\u043e\u043a\u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. flex-start \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 flex-direction, \u0430 start \u2014 \u043e\u0442 writing-mode<\/li>\n<li>flex-end \/ end: \u0441\u0442\u0440\u043e\u043a\u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. flex-end \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 flex-direction, \u0430 end \u2014 \u043e\u0442 writing-mode<\/li>\n<li>center: \u0441\u0442\u0440\u043e\u043a\u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>space-between: \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u2014 \u0432 \u043a\u043e\u043d\u0446\u0435, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e<\/li>\n<li>space-around: \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438<\/li>\n<li>space-evenly: \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445<\/li>\n<li>stretch: \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u0437\u0430\u043d\u0438\u043c\u0430\u044f \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e<\/li>\n<\/ul>\n<p>  \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430-\u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u00absafe\u00bb \u0438 \u00abunsafe\u00bb \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c (\u043d\u0435\u0434\u043e\u0441\u044f\u0433\u0430\u0435\u043c\u044b\u043c, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8n\/qd\/iy\/8nqdiy_mqxxzwin8tg9hk1xxhcw.png\"><\/p>\n<p>  <a name=\"flex-items\"><\/a><\/p>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>  <\/p>\n<h6>order (\u043f\u043e\u0440\u044f\u0434\u043e\u043a)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sn\/yb\/iu\/snybiu6wbogvpa9fthlrtbyl5mq.png\"><\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0432 \u0442\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435. \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u0442\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c.<\/p>\n<pre><code class=\"css\">.item {   order: 5; \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f 0 *\/ } <\/code><\/pre>\n<p>  <\/p>\n<h6>flex-grow (\u0440\u043e\u0441\u0442, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/78\/im\/lv\/78imlvs0xfc-q8suhm5gdjfmfhy.png\"><\/p>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041e\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0446\u0435\u043b\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438. \u041f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abflex-grow\u00bb \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c 1, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c flex-grow \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 2, \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0432\u043e\u0439\u043d\u0443\u044e \u043f\u043e\u0440\u0446\u0438\u044e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (\u0438\u043b\u0438, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c).<\/p>\n<pre><code class=\"css\">.item {   flex-grow: 4; \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 0 *\/ } <\/code><\/pre>\n<p>  \u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b.<\/p>\n<h6>flex-shrink (\u0441\u0436\u0430\u0442\u0438\u0435, \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435)<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u0441\u0436\u0430\u0442\u0438\u044e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"css\">.item {   flex-shrink: 3; \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 1 *\/ } <\/code><\/pre>\n<p>  \u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b.<\/p>\n<h6>flex-basis<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u042d\u0442\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043b\u0438\u043d\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 20%, 5rem \u0438 \u0442.\u0434.) \u0438\u043b\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abauto\u00bb \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abwidth\u00bb \u0438\u043b\u0438 \u00abheight\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u043c\u0435\u0441\u0442\u043e auto \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e\u0441\u044c main-size). \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abcontent\u00bb \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0443\u0447\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0423\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u043f\u043e\u043a\u0430 \u043f\u043b\u043e\u0445\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 min-content, max-content \u0438 fit-content.<\/p>\n<pre><code class=\"css\">.item {   flex-basis:  | auto; \/* \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e auto *\/ } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 0, \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0441\u0447\u0435\u0442. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00abauto\u00bb, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abflex-grow\u00bb.<\/p>\n<h6>flex<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f flex-grow, flex-shrink \u0438 flex-basis. \u0412\u0442\u043e\u0440\u043e\u0439 \u0438 \u0442\u0440\u0435\u0442\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (flex-shrink \u0438 flex-basis) \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 0 1 auto, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c auto \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c.<\/p>\n<pre><code class=\"css\">.item {   flex: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ] } <\/code><\/pre>\n<p>  \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<h6>align-selt (\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430)<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zh\/sm\/52\/zhsm52bg1afai-flf5k9izalrae.png\"><\/p>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e align-self \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0421\u043c. \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 align-items \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<pre><code class=\"css\">.item {   align-self: auto | flex-start | flex-end | center | baseline | stretch; } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e float, clear \u0438 vertical-align \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<p>  <a name=\"flex-examples\"><\/a><\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/h3>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u2014 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/p>\n<pre><code class=\"css\">.parent {   display: flex;   height: 300px; \/* \u0418\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 *\/ }  .child {   width: 100px;  \/* \u0418\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 *\/   height: 100px; \/* \u0418\u043b\u0438 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 *\/   margin: auto;  \/* \u0412\u043e\u043b\u0448\u0435\u0431\u0441\u0442\u0432\u043e! *\/ } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abmargin\u00bb \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u00abauto\u00bb \u043f\u043e\u0433\u043b\u0430\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0432 auto \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e \u043e\u0431\u0435\u0438\u043c \u043e\u0441\u044f\u043c.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0423 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f 6 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u043e\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e.<\/p>\n<pre><code class=\"css\">.flex-container {   \/* \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0444\u043b\u0435\u043a\u0441-\u043c\u0430\u043a\u0435\u0442\u0430 *\/   display: flex;    \/* \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u0430,     \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438    * \u0423\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443:    * flex-direction: row;    * flex-wrap: wrap;    *\/   flex-flow: row wrap;    \/* \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e *\/   justify-content: space-around; } <\/code><\/pre>\n<p>  \u0413\u043e\u0442\u043e\u0432\u043e. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<div class=\"oembed\"><iframe id=\"5fb4eeb705d782142ffea4b4\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fb4eeb705d782142ffea4b4\"><\/iframe><\/div>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432 \u0448\u0430\u043f\u043a\u0435 \u0441\u0430\u0439\u0442\u0430 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u043d\u043e\u0435 \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e, \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0433\u0430\u043b\u043e\u0441\u044c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0438 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445. \u041f\u0440\u043e\u0449\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e.<\/p>\n<pre><code class=\"css\">\/* \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b *\/ .navigation {   display: flex;   flex-flow: row wrap;   \/* \u042d\u0442\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0432\u0434\u043e\u043b\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 *\/   justify-content: flex-end; }  \/* \u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b *\/ @media (max-width: 800px) {   .navigation {     \/* \u041d\u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043c\u044b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043c\u0435\u043d\u044e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 *\/     justify-content: space-around;   } }  \/* \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b *\/ @media (max-width: 500px) {   .navigation {     \/* \u041d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043e\u0441\u0438 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e (\u0441\u0442\u0440\u043e\u043a\u0430) \u043d\u0430 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 (\u043a\u043e\u043b\u043e\u043d\u043a\u0430) *\/     flex-direction: column;   } } <\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\"><iframe id=\"5fb4eeb9cb79a1e12d66642c\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fb4eeb9cb79a1e12d66642c\"><\/iframe><\/div>\n<p>  \u041f\u043e\u044d\u043a\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0441 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f mobile-first \u0442\u0440\u0435\u0445\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u0441 \u043f\u043e\u043b\u043d\u043e\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0439 \u0448\u0430\u043f\u043a\u043e\u0439 \u0438 \u043f\u043e\u0434\u0432\u0430\u043b\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<pre><code class=\"css\">.wrapper {   display: flex;   flex-flow: row wrap; }  \/* \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e flex-basis \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 100% *\/ .wrapper &gt; * {   flex: 1 100%; }  \/* \u041f\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 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439  * 1. header  * 2. article  * 3. aside 1  * 4. aside 2  * 5. footer  *\/  \/* \u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b *\/ @media all and (min-width: 600px) {   \/* \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430\u043c \u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0443 *\/   .aside { flex: 1 auto; } }  \/* \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b *\/ @media all and (min-width: 800px) {   \/* \u041c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0430\u0439\u0434\u0431\u0430\u0440 \u0438 main \u043c\u0435\u0441\u0442\u0430\u043c\u0438    * \u0418 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c main \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432 2 \u0440\u0430\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430, \u0447\u0435\u043c \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u044b    *\/   .main { flex: 2 0px; }   .aside-1 { order: 1; }   .main    { order: 2; }   .aside-2 { order: 3; }   .footer  { order: 4; } } <\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\"><iframe id=\"5fb4ebedcb79a1e12d66642b\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fb4ebedcb79a1e12d66642b\"><\/iframe><\/div>\n<p>  <a name=\"flex-resources\"><\/a><\/p>\n<h3>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/h3>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-flexbox-1\/\" rel=\"nofollow\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\" rel=\"nofollow\">MDN<\/a><\/li>\n<li><a href=\"https:\/\/flexboxfroggy.com\/#ru\" rel=\"nofollow\">\u0418\u0433\u0440\u0430 Flexbox Froggy<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h6>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3a\/fz\/le\/3afzle-uae2l3lr2zqyklzql1oq.png\"><\/p>\n<p>  <a name=\"grid\"><\/a><\/p>\n<h1>Grid (\u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u0413\u0440\u0438\u0434 \u0438\u043b\u0438 \u0421\u0435\u0442\u043a\u0430)<\/h1>\n<p>  CSS Grid Layout \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u043c\u043e\u0449\u043d\u044b\u043c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u0441 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0424\u043b\u0435\u043a\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u0413\u0440\u0438\u0434 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (Grid Container, \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440) \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (Grid Elements, \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b).<\/p>\n<p>  <a name=\"grid-term\"><\/a><\/p>\n<h3>\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/h3>\n<p>  <\/p>\n<h6>\u0413\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (Grid Container, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440)<\/h6>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abdisplay\u00bb \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u00abgrid\u00bb, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c. \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u044b\u043c \u043f\u0440\u0435\u0434\u043a\u043e\u043c \u0432\u0441\u0435\u0445 \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u00abdiv\u00bb \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abcontainer\u00bb \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c.<\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;container&quot;&gt;   &lt;div class=&quot;item item-1&quot;&gt; &lt;\/div&gt;   &lt;div class=&quot;item item-2&quot;&gt; &lt;\/div&gt;   &lt;div class=&quot;item item-3&quot;&gt; &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<h6>\u0413\u0440\u0438\u0434-\u043b\u0438\u043d\u0438\u044f (Grid Line, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u043b\u0438\u043d\u0438\u044f)<\/h6>\n<p>  \u0420\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0421\u0435\u0442\u043a\u0438. \u041e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043b\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u0416\u0435\u043b\u0442\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435 \u2014 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0438\u0434-\u043b\u0438\u043d\u0438\u0438 (\u0433\u0440\u0438\u0434-\u043b\u0438\u043d\u0438\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2b\/10\/qq\/2b10qq2h9hukmpj1wsgprye319y.png\"><\/p>\n<h6>\u0413\u0440\u0438\u0434-\u0442\u0440\u0435\u043a (Grid Track, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u0442\u0440\u0435\u043a \u0438\u043b\u0438 \u0434\u043e\u0440\u043e\u0436\u043a\u0430)<\/h6>\n<p>  \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043c\u0435\u0436\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u0440\u0435\u043a\u0430\u0445 \u043a\u0430\u043a \u043e \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0438\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445 \u0413\u0440\u0438\u0434\u0430. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0432\u0442\u043e\u0440\u043e\u0439 \u0438 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043b\u0438\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/45\/92\/0n\/45920nesd1aixwhbs5s03slie4a.png\"><\/p>\n<h6>\u0413\u0440\u0438\u0434-\u043e\u0431\u043b\u0430\u0441\u0442\u044c (Grid Area, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u043e\u0431\u043b\u0430\u0441\u0442\u044c)<\/h6>\n<p>  \u041e\u0431\u0449\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u043b\u0438\u043d\u0438\u044f\u043c\u0438. \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u0440\u0438\u0434-\u044f\u0447\u0435\u0435\u043a. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 1 \u0438 3 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 1 \u0438 3.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/i9\/py\/c8\/i9pyc80ce5pucvaorjodovlj2ny.png\"><\/p>\n<h6>\u0413\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 (Grid Element, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442)<\/h6>\n<p>  \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u043e\u0442\u043e\u043c\u043e\u043a) \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abitem\u00bb \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00absub-item\u00bb \u2014 \u043d\u0435\u0442.<\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;container&quot;&gt;   &lt;div class=&quot;item&quot;&gt; &lt;\/div&gt;   &lt;div class=&quot;item&quot;&gt;     &lt;p class=&quot;sub-item&quot;&gt; &lt;\/p&gt;   &lt;\/div&gt;   &lt;div class=&quot;item&quot;&gt; &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<h6>\u0413\u0440\u0438\u0434-\u044f\u0447\u0435\u0439\u043a\u0430 (Grid Cell, \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u2014 \u044f\u0447\u0435\u0439\u043a\u0430)<\/h6>\n<p>  \u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043c\u0435\u0436\u043d\u044b\u043c\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438. \u042d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0421\u0435\u0442\u043a\u0438. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u044f\u0447\u0435\u0439\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 1 \u0438 2 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 2 \u0438 3.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yg\/7i\/jq\/yg7ijqxbd-f79i-vcbxk6cjceai.png\"><\/p>\n<p>  <a name=\"grid-example\"><\/a><\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440<\/h3>\n<p>  \u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441 \u0433\u0438\u0431\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u0435\u0437 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<pre><code class=\"css\">.grid {   display: grid;   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));   \/* \u0414\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c min() *\/   \/* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); *\/   grid-gap: 1rem;   \/* \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c, \u043d\u043e \u0445\u0443\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f *\/   \/* gap: 1rem *\/ } <\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\"><iframe id=\"5fb4ebee2cbf1a1445b3531f\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fb4ebee2cbf1a1445b3531f\"><\/iframe><\/div>\n<p>  <a name=\"grid-container\"><\/a><\/p>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h3>\n<p>  <\/p>\n<h6>display<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/p>\n<pre><code class=\"css\">.container {   display: grid | inline-grid; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>grid \u2014 \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u0421\u0435\u0442\u043a\u0430<\/li>\n<li>inline-grid \u2014 \u0441\u0442\u0440\u043e\u0447\u043d\u0430\u044f \u0421\u0435\u0442\u043a\u0430<\/li>\n<\/ul>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0413\u0440\u0438\u0434\u043e\u0432 \u0431\u044b\u043b\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d\u0430 \u0432 <a href=\"https:\/\/www.w3.org\/TR\/css-grid-2\/#subgrids\" rel=\"nofollow\">\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e CSS Grid \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f<\/a>.<\/p>\n<h6>grid-template-columns, grid-template-rows<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0421\u0435\u0442\u043a\u0438 \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0440\u0435\u043a\u0430, \u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u2014 \u043b\u0438\u043d\u0438\u044e.<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns:  ... |   ...;   grid-template-rows:  ... |   ...; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;track-size&gt; \u2014 \u0434\u043b\u0438\u043d\u0430, \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u0444\u0440\u0430\u043a\u0446\u0438\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0413\u0440\u0438\u0434\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u00abfr\u00bb)<\/li>\n<li>&lt;line-name&gt; \u2014 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/li>\n<\/ul>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0442\u0440\u0435\u043a\u043e\u0432, \u043b\u0438\u043d\u0438\u044f\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 40px 50px auto 50px 40px;   grid-template-rows: 25% 100px auto; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/i2\/vu\/ri\/i2vurirk3u_cc_nq1ztq2ub4gmc.png\"><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];   grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yk\/vg\/qk\/ykvgqk4gcrd7wox6dpk2bx1qjda.png\"><\/p>\n<p>  \u041b\u0438\u043d\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439. \u0417\u0434\u0435\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0442\u043e\u0440\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">.container {   grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u00abrepeat\u00bb \u0434\u043b\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: repeat(3, 20px [col-start]); } <\/code><\/pre>\n<p>  \u0427\u0442\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u043d\u0438\u0439 \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0438\u043c\u0435\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043b\u0438\u043d\u0438\u0438 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u043a\u0438\u0445 \u043b\u0438\u043d\u0438\u0439.<\/p>\n<pre><code class=\"css\">.item {   grid-column-start: col-start 2; } <\/code><\/pre>\n<p>  \u0415\u0434\u0438\u043d\u0438\u0446\u0430 \u00abfr\u00bb \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0440\u0435\u043a\u0430 \u043a\u0430\u043a \u0444\u0440\u0430\u043a\u0446\u0438\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. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u0442\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 1fr 1fr 1fr; } <\/code><\/pre>\n<p>  \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u00abfr\u00bb \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 50px:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 1fr 50px 1fr 1fr; } <\/code><\/pre>\n<p>  <\/p>\n<h6>grid-template-areas<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0421\u0435\u0442\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u00abgrid-area\u00bb. \u041f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0447\u0435\u0435\u043a. \u0422\u043e\u0447\u043a\u0430 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043f\u0443\u0441\u0442\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443. \u0422\u0430\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0421\u0435\u0442\u043a\u0438.<\/p>\n<pre><code class=\"css\">.container {   grid-template-areas:     &quot; | . | none | ...&quot;     &quot;...&quot;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;grid-area-name&gt; \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438<\/li>\n<li>. \u2014 \u043f\u0443\u0441\u0442\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430<\/li>\n<li>none \u2014 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.item-a {   grid-area: header; } .item-b {   grid-area: main; } .item-c {   grid-area: sidebar; } .item-d {   grid-area: footer; }  .container {   display: grid;   grid-template-columns: 50px 50px 50px 50px;   grid-template-rows: auto;   grid-template-areas:     &quot;header header header header&quot;     &quot;main main . sidebar&quot;     &quot;footer footer footer footer&quot;; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0421\u0435\u0442\u043a\u0443 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 \u0447\u0435\u0442\u044b\u0440\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u0432 \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438. \u041f\u0435\u0440\u0432\u0430\u044f (\u0432\u0435\u0440\u0445\u043d\u044f\u044f) \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0448\u0430\u043f\u043a\u043e\u0439. \u0421\u0440\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 \u00abmain\u00bb, \u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u043e\u0434\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u00absidebar\u00bb. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u043f\u043e\u0434\u0432\u0430\u043b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zq\/02\/ai\/zq02aira6emghjgu1y1nbadiuys.png\"><\/p>\n<p>  \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a.<\/p>\n<p>  \u0414\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0443\u0441\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0447\u0435\u043a. \u0414\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043d\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u0430, \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439, \u0430 \u043d\u0435 \u043b\u0438\u043d\u0438\u0439. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043b\u0438\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438\u043c\u0435\u043d\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0415\u0441\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00abfoo\u00bb, \u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 (\u043f\u0435\u0440\u0432\u044b\u0445) \u043b\u0438\u043d\u0438\u0439 (\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439) \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u00abfoo-start\u00bb, \u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u2014 \u00abfoo-end\u00bb. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439, \u043a\u0430\u043a \u0432 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0433\u0434\u0435 \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u043b\u0435\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u0442\u0440\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f: header-start, main-start \u0438 footer-start.<\/p>\n<h6>grid-template<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f grid-template-rows, grid-template-columns \u0438 grid-template-areas.<\/p>\n<pre><code class=\"css\">.container {   grid-template: none | &lt;grid-template-rows&gt; \/ &lt;grid-template-columns&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>none \u2014 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445<\/li>\n<li>&lt;grid-template-rows&gt; \/ &lt;grid-template-columns&gt; \u2014 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u00abgrid-template-rows\u00bb \u0438 \u00abgrid-template-columns\u00bb \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u00abgrid-template-areas\u00bb \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abnone\u00bb<\/li>\n<\/ul>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439, \u043d\u043e \u0432 \u0442\u043e\u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<pre><code class=\"css\">.container {   grid-template:     [row1-start] &quot;header header header&quot; 25px [row1-end]     [row2-start] &quot;footer footer footer&quot; 25px [row2-end]     \/ auto 50px auto; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443:<\/p>\n<pre><code class=\"css\">.container {   grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];   grid-template-columns: auto 50px auto;   grid-template-areas:     &quot;header header header&quot;     &quot;footer footer footer&quot;; } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 grid-template \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u044f\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0421\u0435\u0442\u043a\u0438 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a grid-auto-columns, grid-auto-rows \u0438 grid-auto-flow), \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abgrid\u00bb.<\/p>\n<h6>column-gap, row-gap, grid-column-gap, grid-row-gap<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043b\u0438\u043d\u0438\u0439. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043e\u043d\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438\/\u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">.container {   \/* \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 *\/   column-gap: &lt;line-size&gt;;   row-gap: &lt;line-size&gt;;    \/* \u0440\u0430\u043d\u044c\u0448\u0435 *\/   grid-column-gap: &lt;line-size&gt;;   grid-row-gap: &lt;line-size&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;line-size&gt; \u2014 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 100px 50px 100px;   grid-template-rows: 80px auto 80px;   column-gap: 10px;   row-gap: 15px; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9a\/c9\/ci\/9ac9cing2y0nzf4sa_em-wf_kl8.png\"><\/p>\n<p>  \u041e\u0442\u0441\u0442\u0443\u043f\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438\/\u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u043d\u043e \u043d\u0435 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0421\u0435\u0442\u043a\u0438.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-column-gap\u00bb \u0438 \u00abgrid-row-gap\u00bb \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0432 \u00abcolumn-gap\u00bb \u0438 \u00abrow-gap\u00bb.<\/p>\n<h6>gap, grid-gap<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f row-gap \u0438 column-gap.<\/p>\n<pre><code class=\"css\">.container {   \/* \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 *\/   gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;;    \/* \u0440\u0430\u043d\u044c\u0448\u0435 *\/   grid-gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;grid-row-gap&gt; &lt;grid-column-gap&gt; \u2014 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 100px 50px 100px;   grid-template-rows: 80px auto 80px;   gap: 15px 10px; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abrow-gap\u00bb \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u043e\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abcolumn-gap\u00bb.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abgrid-gap\u00bb \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043e \u0432 \u00abgap\u00bb.<\/p>\n<h6>justify-items<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e) \u043e\u0441\u0438 (\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0441\u0442\u0432\u0443 \u00abalign-items\u00bb, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u043c\u0443 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439) \u043e\u0441\u0438). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"css\">.container {   justify-items: start | end | center | stretch; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>start \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0438\u0445 \u044f\u0447\u0435\u0435\u043a (\u043b\u0435\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>end \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u044f\u0447\u0435\u0435\u043a (\u043f\u0440\u0430\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>center \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0433\u0430\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>stretch \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u044f\u0447\u0435\u0435\u043a<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   justify-items: start; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fx\/wy\/bx\/fxwybxbqkqfl4xhvrxrfmfr8hyw.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-items: end; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gb\/uj\/tu\/gbujtu8ep1yfart8fwsuf5qgw7m.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-items: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uf\/o5\/sd\/ufo5sd50p8lzigpzeyvfkrg5cvg.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-items: stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_u\/cl\/jd\/_ucljdn3laxlwvx1_i6byms5go8.png\"><\/p>\n<p>  \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u00abjustify-self\u00bb.<\/p>\n<h6>align-items<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439) \u043e\u0441\u0438 (\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u00abjustify-items\u00bb, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439) \u043e\u0441\u0438). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"css\">.container {   align-items: start | end | center | stretch; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>start \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0438\u0445 \u044f\u0447\u0435\u0435\u043a (\u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>end \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0447 \u044f\u0447\u0435\u0435\u043a (\u043d\u0438\u0436\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>center \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>stretch \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u044f\u0447\u0435\u0435\u043a<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   align-items: start; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/um\/z7\/f6\/umz7f6p1ilrdz1pqtgbpr8e0lvg.png\"><\/p>\n<pre><code class=\"css\">.container {   align-items: end; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hf\/3z\/xc\/hf3zxc7oysxcknjfhom0cpwxhfo.png\"><\/p>\n<pre><code class=\"css\">.container {   align-items: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ui\/v-\/in\/uiv-ino5nm4bdb3g5n91zhcmwf4.png\"><\/p>\n<pre><code class=\"css\">.container {   align-items: stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/eh\/1q\/aa\/eh1qaae60etkrtfc4w4-67gydne.png\"><\/p>\n<p>  \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0434\u043e\u043b\u044c \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u00abalign-self\u00bb.<\/p>\n<h6>place-items<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f align-items \u0438 justify-items.<\/p>\n<pre><code class=\"css\">.container {   place-items: &lt;align-items&gt; &lt;justify-items&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;align-items&gt; &lt;justify-items&gt; \u2014 \u043f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f align-items, \u0432\u0442\u043e\u0440\u043e\u0435 \u2014 \u0434\u043b\u044f justify-items. \u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043e\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.container {   place-items: center start; } <\/code><\/pre>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044f\u0447\u0435\u0435\u043a \u0432\u0434\u043e\u043b\u044c \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u0438 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438.<\/p>\n<h6>justify-content (\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a)<\/h6>\n<p>  \u041f\u043e\u0440\u043e\u0439 \u043e\u0431\u0449\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0421\u0435\u0442\u043a\u0438 (\u0435\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a) \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e px, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440). \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0421\u0435\u0442\u043a\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0421\u0435\u0442\u043a\u0438 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u2014 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a (\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u00abalign-content\u00bb, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0421\u0435\u0442\u043a\u0438 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439) \u043e\u0441\u0438 \u2014 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a).<\/p>\n<pre><code class=\"css\">.container {   justify-content: start | end | center | stretch | space-around | space-between | space-evenly; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>start \u2014 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0421\u0435\u0442\u043a\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043b\u0435\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>end \u2014 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0421\u0435\u0442\u043a\u0443 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043f\u0440\u0430\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>center \u2014 \u0421\u0435\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>stretch \u2014 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0421\u0435\u0442\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<li>space-around \u2014 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438, \u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<li>space-between \u2014 \u043f\u0435\u0440\u0432\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u2014 \u0432 \u043a\u043e\u043d\u0435\u0446, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438<\/li>\n<li>space-evenly \u2014 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u0430\u043a \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   justify-content: start; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xj\/qf\/s6\/xjqfs620q37nhbizlo3m9hhrblu.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-content: end; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9h\/db\/dp\/9hdbdp5dgggoo1zdvds4wxz_n2a.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-content: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/c5\/2m\/lj\/c52mljj2c7zv87up9arnjejuwqc.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-content: stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/f0\/33\/ez\/f033ezytcqwxvpqife8uebr_yjm.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-content: space-around; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/58\/yi\/2x\/58yi2xbptzkl4a5rblerfet8v0k.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-content: space-between; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kd\/nt\/01\/kdnt01bnhhtotlxe2qgnsydlbcg.png\"><\/p>\n<pre><code class=\"css\">.container {   justify-content: space-evenly; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/s1\/9e\/vt\/s19evtpajc8it7qc9uhdk7y1ezm.png\"><\/p>\n<h6>align-content (\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a)<\/h6>\n<p>  \u041f\u043e\u0440\u043e\u0439 \u043e\u0431\u0449\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0421\u0435\u0442\u043a\u0438 (\u0435\u0435 \u0441\u0442\u0440\u043e\u043a) \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e px, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440). \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a \u0421\u0435\u0442\u043a\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0421\u0435\u0442\u043a\u0438 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439) \u043e\u0441\u0438 \u2014 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a (\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u00abjustify-content\u00bb, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0421\u0435\u0442\u043a\u0438 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u2014 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a).<\/p>\n<pre><code class=\"css\">.container {   align-content: start | end | center | stretch | space-around | space-between | space-evenly; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>start \u2014 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0421\u0435\u0442\u043a\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>end \u2014 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0421\u0435\u0442\u043a\u0443 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043d\u0438\u0436\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>center \u2014 \u0421\u0435\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>stretch \u2014 \u0441\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0421\u0435\u0442\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<li>space-around \u2014 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<li>space-between \u2014 \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u2014 \u0432 \u043a\u043e\u043d\u0435\u0446, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438<\/li>\n<li>space-evenly \u2014 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u0430\u043a \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   align-content: start; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/51\/wc\/qm\/51wcqmqvl7lu6w43up2gejbf1p8.png\"><\/p>\n<pre><code class=\"css\">.container {   align-content: end; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/i5\/u_\/uj\/i5u_ujav7100uyrq0rtesugokic.png\"><\/p>\n<pre><code class=\"css\">.container {   align-content: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kg\/hk\/uy\/kghkuyeva8xygzefz4litdf3dyy.png\"><\/p>\n<pre><code class=\"css\">.container {   align-content: stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uc\/z1\/mi\/ucz1miypzpkqke6cuv93kshv1cw.png\"><\/p>\n<pre><code class=\"css\">.container {   align-content: space-around; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y0\/vf\/w6\/y0vfw6lyycz9dhvt981gzenjwwi.png\"><\/p>\n<pre><code class=\"css\">.container {   align-content: space-between; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ym\/f9\/sd\/ymf9sdfwwbyrrvkqjxrggjaglo4.png\"><\/p>\n<pre><code class=\"css\">.container {   align-content: space-evenly; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mf\/5z\/e6\/mf5ze6ejcuhwje9a3tgzuxs83o8.png\"><\/p>\n<h6>place-content<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f align-content \u0438 justify-content.<\/p>\n<pre><code class=\"css\">.container {   place-content: &lt;align-content&gt; &lt;justify-content&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;align-content&gt; &lt;justify-content&gt; \u2014 \u043f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f align-content, \u0432\u0442\u043e\u0440\u043e\u0435 \u2014 \u0434\u043b\u044f justify-content. \u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u043e\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.container {   place-content: center start; } <\/code><\/pre>\n<p>  \u0421\u0442\u0440\u043e\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u2014 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435.<\/p>\n<h6>grid-auto-columns, grid-auto-rows (\u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0435\u044f\u0432\u043d\u044b\u0445 \u0442\u0440\u0435\u043a\u043e\u0432)<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u043e\u0440\u043e\u0436\u0435\u043a (\u043d\u0435\u044f\u0432\u043d\u044b\u0445 \u0442\u0440\u0435\u043a\u043e\u0432). \u041d\u0435\u044f\u0432\u043d\u044b\u0435 \u0442\u0440\u0435\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0435\u043c \u044f\u0447\u0435\u0435\u043a \u0421\u0435\u0442\u043a\u0438, \u0438\u043b\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0421\u0435\u0442\u043a\u0438.<\/p>\n<pre><code class=\"css\">.container {   grid-auto-columns: &lt;track-size&gt; ...;   grid-auto-rows: &lt;track-size&gt; ...; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;track-size&gt; \u2014 \u0434\u043b\u0438\u043d\u0430, \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u0444\u0440\u0430\u043a\u0446\u0438\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0421\u0435\u0442\u043a\u0438 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u00abfr\u00bb)<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.container {   grid-template-columns: 60px 60px;   grid-template-rows: 90px 90px; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yb\/r9\/6n\/ybr96nrsk45pz372yrxxludjgre.png\"><\/p>\n<p>  \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0421\u0435\u0442\u043a\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 2\u04452.<\/p>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-column\u00bb \u0438 \u00abgrid-row\u00bb \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">.item-a {   grid-column: 1 \/ 2;   grid-row: 2 \/ 3; } .item-b {   grid-column: 5 \/ 6;   grid-row: 2 \/ 3; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vf\/xq\/3k\/vfxq3knr1cnrhwhpkcdh7cqm0hg.png\"><\/p>\n<p>  \u041d\u0430\u0447\u0430\u043b\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abitem-b\u00bb \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f 5, \u0430 \u043a\u043e\u043d\u0446\u043e\u043c \u2014 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f 6, \u043d\u043e \u043c\u044b \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u044d\u0442\u0438 \u043b\u0438\u043d\u0438\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043b\u0438\u043d\u0438\u0438, \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u044f\u0432\u043d\u044b\u0435 \u0442\u0440\u0435\u043a\u0438 \u0441 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abgrid-auto-columns\u00bb \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u043d\u0435\u044f\u0432\u043d\u044b\u0445 \u0434\u043e\u0440\u043e\u0436\u0435\u043a:<\/p>\n<pre><code class=\"css\">.container {   grid-auto-columns: 60px; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/if\/lf\/vb\/iflfvb2xs0-ns5e50fqdzrvp8-w.png\"><\/p>\n<h6>grid-auto-flow<\/h6>\n<p>  \u0414\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0421\u0435\u0442\u043a\u0438, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f (auto-placement algorithm). \u0420\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c.<\/p>\n<pre><code class=\"css\">.container {   grid-auto-flow: row | column | row dense | column dense; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>row (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u2014 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0438, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u0448\u0438\u0440\u0438\u043d\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443<\/li>\n<li>column \u2014 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0438, \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0441\u043e\u0442\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443<\/li>\n<li>dense \u2014 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0421\u0435\u0442\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430<\/li>\n<\/ul>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e dense \u043c\u0435\u043d\u044f\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \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, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043b\u043e\u0445\u043e \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n<pre><code class=\"css\">  &lt;section class=&quot;container&quot;&gt;   &lt;div class=&quot;item-a&quot;&gt;item-a&lt;\/div&gt;   &lt;div class=&quot;item-b&quot;&gt;item-b&lt;\/div&gt;   &lt;div class=&quot;item-c&quot;&gt;item-c&lt;\/div&gt;   &lt;div class=&quot;item-d&quot;&gt;item-d&lt;\/div&gt;   &lt;div class=&quot;item-e&quot;&gt;item-e&lt;\/div&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0421\u0435\u0442\u043a\u0443, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0438\u0437 \u043f\u044f\u0442\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a, \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u00abgrid-auto-flow\u00bb \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abrow\u00bb (\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e):<\/p>\n<pre><code class=\"css\">.container {   display: grid;   grid-template-columns: 60px 60px 60px 60px 60px;   grid-template-rows: 30px 30px;   grid-auto-flow: row; } <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0421\u0435\u0442\u043a\u0435, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0435\u0441\u0442\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"css\">.item-a {   grid-column: 1;   grid-row: 1 \/ 3; } .item-e {   grid-column: 5;   grid-row: 1 \/ 3; } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-auto-flow\u00bb \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00abrow\u00bb, \u043d\u0430\u0448\u0430 \u0421\u0435\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u00abitem-b\u00bb, \u00abitem-c\u00bb \u0438 \u00abitem-d\u00bb (\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c):<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hz\/12\/7b\/hz127bxghp1v_vawzkaxkd0jnys.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-auto-flow\u00bb \u043d\u0430 \u00abcolumn\u00bb, \u0421\u0435\u0442\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c (\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c):<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5e\/hv\/rz\/5ehvrz2rm15-ccxtjfo43ufm3_y.png\"><\/p>\n<h6>grid<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns \u0438 grid-auto-flow (\u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u044f\u0432\u043d\u044b\u0435\u00bb \u0438\u043b\u0438 \u00ab\u043d\u0435\u044f\u0432\u043d\u044b\u0435\u00bb \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430).<\/p>\n<ul>\n<li>none \u2014 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/li>\n<li>&lt;grid-template&gt; \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044e grid-template<\/li>\n<li>&lt;grid-template-rows&gt; \/ [auto-flow &amp;&amp; dense?] &lt;grid-auto-columns&gt;? \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f grid-template-rows. \u0415\u0441\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0441\u043b\u044d\u0448\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abauto-flow\u00bb, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-auto-flow\u00bb \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u00abcolumn\u00bb. \u0415\u0441\u043b\u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a auto-flow \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abdense\u00bb, \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-auto-columns\u00bb \u043e\u043f\u0443\u0449\u0435\u043d\u043e, \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u00abauto\u00bb<\/li>\n<li>[auto-flow &amp;&amp; dense?] &lt;grid-auto-rows&gt;? \/ &lt;grid-template-columns&gt; \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f grid-template-columns. \u0415\u0441\u043b\u0438 \u0441\u043b\u0435\u0432\u0430 \u043e\u0442 \u0441\u043b\u044d\u0448\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abauto-flow\u00bb, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-auto-flow\u00bb \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u00abrow\u00bb. \u0415\u0441\u043b\u0438 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a auto-flow \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u00abdense\u00bb, \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abgrid-auto-rows\u00bb \u043e\u043f\u0443\u0449\u0435\u043d\u043e, \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u00abauto\u00bb<\/li>\n<\/ul>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b:<\/p>\n<pre><code class=\"css\">.container {   grid: 100px 300px \/ 3fr 1fr; } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   grid-template-rows: 100px 300px;   grid-template-columns: 3fr 1fr; } <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b:<\/p>\n<pre><code class=\"css\">.container {   grid: auto-flow \/ 200px 1fr; } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   grid-auto-flow: row;   grid-template-columns: 200px 1fr; } <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b:<\/p>\n<pre><code class=\"css\">.container {   grid: auto-flow dense 100px \/ 1fr 2fr; } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   grid-auto-flow: row dense;   grid-auto-rows: 100px;   grid-template-columns: 1fr 2fr; } <\/code><\/pre>\n<p>  \u0418 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430 \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b:<\/p>\n<pre><code class=\"css\">.container {   grid: 100px 300px \/ auto-flow 200px; } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.container {   grid-template-rows: 100px 300px;   grid-auto-flow: column;   grid-auto-columns: 200px; } <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439, \u043d\u043e \u0432 \u0442\u043e\u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u00abgrid-template-areas\u00bb, \u00abgrid-template-rows\u00bb \u0438 \u00abgrid-template-columns\u00bb \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0427\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u0430\u043a \u044d\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0442\u0440\u0435\u043a\u043e\u0432 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u042d\u0442\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<pre><code class=\"css\">.container {   grid: [row1-start] &quot;header header header&quot; 1fr [row1-end]         [row2-start] &quot;footer footer footer&quot; 25px [row2-end]         \/ auto 50px auto; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0440\u0430\u0432\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443:<\/p>\n<pre><code class=\"css\">.container {   grid-template-areas:     &quot;header header header&quot;     &quot;footer footer footer&quot;;   grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];   grid-template-columns: auto 50px auto; } <\/code><\/pre>\n<p>  <a name=\"grid-elements\"><\/a><\/p>\n<h3>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 float, display: inline-block, display: table-cell, vertical-align \u0438 column-*, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043a \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<h6>grid-column-start, grid-column-end, grid-row-start, grid-row-end<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0421\u0435\u0442\u043a\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u043b\u0438\u043d\u0438\u044f\u043c. grid-column-start \/ grid-row-start \u2014 \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 grid-column-end \/ grid-row-end \u2014 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435.<\/p>\n<pre><code class=\"css\">.item {   grid-column-start: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;   grid-column-end: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;   grid-row-start: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;   grid-row-end: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;line&gt; \u2014 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0438\u0441\u043b\u043e\u043c (\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u043d\u043e\u043c\u0435\u0440\u0443 \u043b\u0438\u043d\u0438\u0438) \u0438\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c (\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043e\u0441\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u043b\u0438\u043d\u0438\u0438)<\/li>\n<li>span &lt;number&gt; \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442 \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0440\u0435\u043a\u043e\u0432<\/li>\n<li>span &lt;name&gt; \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c<\/li>\n<li>auto \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0434\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0443<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.item-a {   grid-column-start: 2;   grid-column-end: five;   grid-row-start: row1-start;   grid-row-end: 3; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lj\/km\/uv\/ljkmuvtdbtlrdbvaq6-jozy1mm4.png\"><\/p>\n<pre><code class=\"css\">.item-b {   grid-column-start: 1;   grid-column-end: span col4-start;   grid-row-start: 2;   grid-row-end: span 2; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5l\/wn\/8q\/5lwn8qu-uo-u6b4znze0lra6pzk.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 grid-column-end \/ grid-row-end \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u0439\u043c\u0435\u0442 1 \u0442\u0440\u0435\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e z-index \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h6>grid-column, grid-row<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f grid-column-start + grid-column-end \u0438 grid-row-start + grid-row-end, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<pre><code class=\"css\">.item {   grid-column: &lt;start-line&gt; \/ &lt;end-line&gt; | &lt;start-line&gt; \/ span &lt;value&gt;;   grid-row: &lt;start-line&gt; \/ &lt;end-line&gt; | &lt;start-line&gt; \/ span &lt;value&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;start-line&gt; \/ &lt;end-line&gt; \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f span<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"css\">.item-c {   grid-column: 3 \/ span 2;   grid-row: third-line \/ 4; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rg\/gk\/ww\/rggkww6mnh6h7lbjyh7goz1r5im.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c 1 \u0442\u0440\u0435\u043a.<\/p>\n<h6>grid-area<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 grid-template-areas. grid-area \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0434\u043b\u044f grid-row-start + grid-column-start + grid-row-end + grid-column-end.<\/p>\n<pre><code class=\"css\">.item {   grid-area: &lt;name&gt; | &lt;row-start&gt; \/ &lt;column-start&gt; \/ &lt;row-end&gt; \/ &lt;column-end&gt;; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>&lt;name&gt; \u2014 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li>\n<li>&lt;row-start&gt; \/ &lt;column-start&gt; \/ &lt;row-end&gt; \/ &lt;column-end&gt; \u2014 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0447\u0438\u0441\u043b\u0430\u043c\u0438 \u0438\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043b\u0438\u043d\u0438\u0439<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443:<\/p>\n<pre><code class=\"css\">.item-d {   grid-area: header; } <\/code><\/pre>\n<p>  \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0434\u043b\u044f grid-row-start + grid-column-start + grid-row-end + grid-column-end:<\/p>\n<pre><code class=\"css\">.item-d {   grid-area: 1 \/ col4-start \/ last-line \/ 6; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/c5\/vp\/w9\/c5vpw9zcxx7fgum0ttthfbyve4u.png\"><\/p>\n<h6>justify-self<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 (\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 align-self, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439) \u043e\u0441\u0438). \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<pre><code class=\"css\">.item {   justify-self: start | end | center | stretch; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>start \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u044f\u0447\u0435\u0439\u043a\u0438 (\u043b\u0435\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>end \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u044f\u0447\u0435\u0439\u043a\u0438 (\u043f\u0440\u0430\u0432\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>center \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>stretch \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u044f\u0447\u0435\u0439\u043a\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.item-a {   justify-self: start; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5_\/ei\/_j\/5_ei_jyxeshi1icqfv5n49fsr-u.png\"><\/p>\n<pre><code class=\"css\">.item-a {   justify-self: end; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/h3\/is\/iz\/h3isizlleg3gdxdxc3ohk0snkvg.png\"><\/p>\n<pre><code class=\"css\">.item-a {   justify-self: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3l\/6s\/hs\/3l6shsolcwt0suspql9fav5fg7c.png\"><\/p>\n<pre><code class=\"css\">.item-a {   justify-self: stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hj\/b1\/p2\/hjb1p2tcb3injc_bf3fdxk2l9us.png\"><\/p>\n<p>  \u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0421\u0435\u0442\u043a\u0438 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e justify-items.<\/p>\n<h6>align-self<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u044f\u0447\u0435\u0439\u043a\u0435 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439) \u043e\u0441\u0438 (\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 justify-self, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0434\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0439 \u043e\u0441\u0438). \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438.<\/p>\n<pre><code class=\"css\">.item {   align-self: start | end | center | stretch; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>start \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u044f\u0447\u0435\u0439\u043a\u0438 (\u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>end \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446 \u044f\u0447\u0435\u0439\u043a\u0438 (\u043d\u0438\u0436\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430)<\/li>\n<li>center \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443<\/li>\n<li>stretch \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u044f\u0447\u0435\u0439\u043a\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.item-a {   align-self: start; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ii\/rl\/ao\/iirlaodzggqni5xcjfwyte1zovk.png\"><\/p>\n<pre><code class=\"css\">.item-a {   align-self: end; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/m3\/ym\/cn\/m3ymcnaj8oyoxxb6bn11niieujm.png\"><\/p>\n<pre><code class=\"css\">.item-a {   align-self: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ko\/ha\/ck\/kohackahjtwgo3rbsyrmbatt86e.png\"><\/p>\n<pre><code class=\"css\">.item-a {   align-self: stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xp\/gd\/bx\/xpgdbxul25snd94cwriiyxclo9m.png\"><\/p>\n<p>  \u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0421\u0435\u0442\u043a\u0438 \u0432\u0434\u043e\u043b\u044c \u0431\u043b\u043e\u0447\u043d\u043e\u0439 (\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439) \u043e\u0441\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e align-items.<\/p>\n<h6>place-self<\/h6>\n<p>  \u0414\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f align-self \u0438 justify-self.<\/p>\n<ul>\n<li>auto \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/li>\n<li>&lt;align-self&gt; \/ &lt;justify-self&gt; \u2014 \u043f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f align-self, \u0432\u0442\u043e\u0440\u043e\u0435 \u2014 \u0434\u043b\u044f justify-self. \u0415\u0441\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0443\u0449\u0435\u043d\u043e, \u043f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043e\u0431\u043e\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"css\">.item-a {   place-self: center; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/se\/hd\/oy\/sehdoyrc5dcvf1fiwhe-4kheqcg.png\"><\/p>\n<pre><code class=\"css\">.item-a {   place-self: center stretch; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/db\/no\/po\/dbnoponroc1q8y6_-bwbxfyuzig.png\"><\/p>\n<h6>\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430<\/h6>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a px, rem, % \u0438 \u0442.\u0434., \u043d\u043e \u0438 \u0442\u0430\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430, \u043a\u0430\u043a min-content, max-content, auto \u0438, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u2014 \u0444\u0440\u0430\u043a\u0446\u0438\u0438 (fr). grid-template-columns: 200px 1fr 2fr min-content<\/li>\n<li>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043b\u0430\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 1fr, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0434\u043e 200px: grid-template-columns: 1fr minmax(200px, 1fr)<\/li>\n<li>\u0424\u0443\u043d\u043a\u0446\u0438\u044f repeat() \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: grid-template-columns: repeat(10, 1fr) (\u0434\u0435\u0441\u044f\u0442\u044c \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 1fr)<\/li>\n<li>\u0421\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0439 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u043c\u0430\u043a\u0435\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) (\u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043f\u0440\u043e \u0413\u0440\u0438\u0434)<\/li>\n<\/ul>\n<p>  <a name=\"grid-resources\"><\/a><\/p>\n<h3>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/h3>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/\" rel=\"nofollow\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/CSS_Grid_Layout\" rel=\"nofollow\">MDN<\/a><\/li>\n<li><a href=\"https:\/\/cssgridgarden.com\/#ru\" rel=\"nofollow\">\u0418\u0433\u0440\u0430 Grid Garden<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h6>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/t6\/gh\/mp\/t6ghmpc37unceqpp8fpb4_xtbee.png\"><\/p>\n<p>  <a name=\"tutorial\"><\/a><\/p>\n<h1>\u0422\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/h1>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440 \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c Flexbox.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pc\/o4\/ca\/pco4ca-a_boefqrrhpdfdkbgbug.png\"><\/p>\n<h6>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h6>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;main&gt;   &lt;div id=&quot;controls&quot;&gt;     &lt;div id=&quot;buttons&quot;&gt;       &lt;button data-btn=&quot;addBtn&quot;&gt;Add Item&lt;\/button&gt;       &lt;button data-btn=&quot;removeBtn&quot;&gt;Remove Item&lt;\/button&gt;     &lt;\/div&gt;     &lt;fieldset id=&quot;flexContainerProps&quot;&gt;       &lt;legend&gt;Flex Container Props&lt;\/legend&gt;       &lt;label for=&quot;flexDirection&quot;&gt;flex-direction&lt;\/label&gt;       &lt;select id=&quot;flexDirection&quot;&gt;         &lt;option value=&quot;row&quot; selected&gt;row&lt;\/option&gt;         &lt;option value=&quot;row-reverse&quot;&gt;row-reverse&lt;\/option&gt;         &lt;option value=&quot;column&quot;&gt;column&lt;\/option&gt;         &lt;option value=&quot;column-reverse&quot;&gt;column-reverse&lt;\/option&gt;       &lt;\/select&gt;        &lt;label for=&quot;flexWrap&quot;&gt;flex-wrap&lt;\/label&gt;       &lt;select id=&quot;flexWrap&quot;&gt;         &lt;option value=&quot;nowrap&quot;&gt;nowrap&lt;\/option&gt;         &lt;option value=&quot;wrap&quot; selected&gt;wrap&lt;\/option&gt;         &lt;option value=&quot;wrap-reverse&quot;&gt;wrap-reverse&lt;\/option&gt;       &lt;\/select&gt;        &lt;label for=&quot;justifyContent&quot;&gt;justify-content&lt;\/label&gt;       &lt;select id=&quot;justifyContent&quot;&gt;         &lt;option value=&quot;flex-start&quot;&gt;flex-start&lt;\/option&gt;         &lt;option value=&quot;flex-end&quot;&gt;flex-end&lt;\/option&gt;         &lt;option value=&quot;center&quot; selected&gt;center&lt;\/option&gt;         &lt;option value=&quot;space-between&quot;&gt;space-between&lt;\/option&gt;         &lt;option value=&quot;space-around&quot;&gt;space-around&lt;\/option&gt;         &lt;option value=&quot;space-evenly&quot;&gt;space-evenly&lt;\/option&gt;       &lt;\/select&gt;        &lt;label for=&quot;alignItems&quot;&gt;align-items&lt;\/label&gt;       &lt;select id=&quot;alignItems&quot;&gt;         &lt;option value=&quot;flex-start&quot;&gt;flex-start&lt;\/option&gt;         &lt;option value=&quot;flex-end&quot;&gt;flex-end&lt;\/option&gt;         &lt;option value=&quot;center&quot; selected&gt;center&lt;\/option&gt;         &lt;option value=&quot;stretch&quot;&gt;stretch&lt;\/option&gt;         &lt;option value=&quot;baseline&quot;&gt;baseline&lt;\/option&gt;       &lt;\/select&gt;        &lt;label for=&quot;alignContent&quot;&gt;align-content&lt;\/label&gt;       &lt;select id=&quot;alignContent&quot;&gt;         &lt;option value=&quot;flex-start&quot; selected&gt;flex-start&lt;\/option&gt;         &lt;option value=&quot;flex-end&quot;&gt;flex-end&lt;\/option&gt;         &lt;option value=&quot;center&quot;&gt;center&lt;\/option&gt;         &lt;option value=&quot;stretch&quot;&gt;stretch&lt;\/option&gt;         &lt;option value=&quot;space-between&quot;&gt;space-between&lt;\/option&gt;         &lt;option value=&quot;space-around&quot;&gt;space-around&lt;\/option&gt;         &lt;option value=&quot;space-evenly&quot;&gt;space-evenly&lt;\/option&gt;       &lt;\/select&gt;     &lt;\/fieldset&gt;      &lt;fieldset id=&quot;flexItemProps&quot;&gt;       &lt;legend&gt;Flex Item Props&lt;\/legend&gt;       &lt;label for=&quot;order&quot;&gt;order&lt;\/label&gt;       &lt;input         id=&quot;order&quot;         type=&quot;number&quot;         min=&quot;-5&quot;         max=&quot;5&quot;         step=&quot;1&quot;         value=&quot;0&quot;       \/&gt;        &lt;label for=&quot;flexGrow&quot;&gt;flex-grow&lt;\/label&gt;       &lt;input         id=&quot;flexGrow&quot;         type=&quot;number&quot;         min=&quot;0&quot;         max=&quot;5&quot;         step=&quot;1&quot;         value=&quot;0&quot;       \/&gt;        &lt;label for=&quot;flexShrink&quot;&gt;flex-shrink&lt;\/label&gt;       &lt;input         id=&quot;flexShrink&quot;         type=&quot;number&quot;         min=&quot;1&quot;         max=&quot;6&quot;         step=&quot;1&quot;         value=&quot;1&quot;       \/&gt;        &lt;label for=&quot;alignSelf&quot;&gt;align-self&lt;\/label&gt;       &lt;select id=&quot;alignSelf&quot;&gt;         &lt;option value=&quot;auto&quot; selected&gt;auto&lt;\/option&gt;         &lt;option value=&quot;flex-start&quot;&gt;flex-start&lt;\/option&gt;         &lt;option value=&quot;flex-end&quot;&gt;flex-end&lt;\/option&gt;         &lt;option value=&quot;center&quot;&gt;center&lt;\/option&gt;         &lt;option value=&quot;stretch&quot;&gt;stretch&lt;\/option&gt;         &lt;option value=&quot;baseline&quot;&gt;baseline&lt;\/option&gt;       &lt;\/select&gt;     &lt;\/fieldset&gt;   &lt;\/div&gt;    &lt;div id=&quot;flexContainer&quot;&gt;     &lt;div class=&quot;flex-item selected&quot;&gt;1&lt;\/div&gt;     &lt;div class=&quot;flex-item&quot;&gt;2&lt;\/div&gt;     &lt;div class=&quot;flex-item&quot;&gt;3&lt;\/div&gt;     &lt;div class=&quot;flex-item&quot;&gt;4&lt;\/div&gt;     &lt;div class=&quot;flex-item&quot;&gt;5&lt;\/div&gt;     &lt;div class=&quot;flex-item&quot;&gt;6&lt;\/div&gt;   &lt;\/div&gt; &lt;\/main&gt; <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (flexContainer) \u0441 \u0448\u0435\u0441\u0442\u044c\u044e \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (flex-item) \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (controls) \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (flexContainerProps) \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e (selected) \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (flexItemProps). \u0422\u0430\u043a\u0436\u0435 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0443 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 (buttons): \u043e\u0434\u043d\u0430 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u043e \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (addBtn), \u0434\u0440\u0443\u0433\u0430\u044f \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (removeBtn).<\/p>\n<h6>\u0421\u0442\u0438\u043b\u0438<\/h6>\n<p>  <\/p>\n<pre><code class=\"css\">main {   display: flex;   justify-content: center;   align-items: center; }  #controls {   margin-right: 0.4rem; }  #buttons {   margin: 0.4rem;   display: flex;   flex-wrap: wrap;   justify-content: center; }  button {   margin: 0.2rem; }  label {   display: block;   margin: 0.4rem; }  select {   width: 100%; }  #flexContainer {   width: 600px;   height: 600px;   border: 1px dashed #222;   border-radius: 4px;   display: flex;   flex-wrap: wrap;   justify-content: center;   align-items: center; }  .flex-item {   min-width: 178px;   min-height: 178px;   background: radial-gradient(circle, yellow, orange);   border: 1px solid #222;   border-radius: 4px;   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);   color: #222;   font-size: 2rem;   display: flex;   justify-content: center;   align-items: center;   user-select: none;   cursor: pointer; }  .flex-item:nth-child(2n) {   min-width: 158px;   min-height: 158px; }  .flex-item:nth-child(3n) {   min-width: 198px;   min-height: 198px; }  .flex-item.selected {   background: radial-gradient(circle, lightgreen, darkgreen); } <\/code><\/pre>\n<p>  \u0424\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0433\u0438\u0431\u043a\u0438\u043c\u0438. \u041c\u044b \u0434\u043e\u0431\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e min-width\/min-height \u0438 nth-child. \u0412\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 \u00abselected\u00bb \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u0430.<\/p>\n<h6>\u0421\u043a\u0440\u0438\u043f\u0442<\/h6>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 const controls = document.querySelector('#controls') const buttons = document.querySelector('#buttons') const flexContainer = document.querySelector('#flexContainer')  \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 buttons.addEventListener('click', (e) =&gt; {   \/\/ \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438   if (e.target.tagName !== 'BUTTON') return    \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438   const { btn } = e.target.dataset    switch (btn) {     \/\/ \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u043e \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440     case 'addBtn':       \/\/ \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 6 \u0435\u0434\u0438\u043d\u0438\u0446       \/\/ \u041f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430       \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430       const num = document.querySelectorAll('.flex-item').length + 1       \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 7 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432       \/\/ \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a       if (num &lt; 7) {         \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &quot;div&quot;         const newItem = document.createElement('div')         \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043b\u0430\u0441\u0441         newItem.className = 'flex-item'         \/\/ \u041d\u0443\u043c\u0435\u0440\u0443\u0435\u043c \u0435\u0433\u043e         newItem.textContent = num         \/\/ \u0418 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0432\u043e \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440         flexContainer.append(newItem)       }       break     \/\/ \u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     case 'removeBtn':       \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430       const index = document.querySelectorAll('.flex-item').length - 1       \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 0       \/\/ \u041c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442       if (index &gt; 0) {         \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u043e\u0434\u043b\u0435\u0436\u0430\u0449\u0438\u0439 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044e         const itemToRemove = document.querySelectorAll('.flex-item')[index]         \/\/ \u0418 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0433\u043e         itemToRemove.remove()       }       break   } })  \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0432 \u0438 \u0438\u043d\u043f\u0443\u0442\u043e\u0432 controls.addEventListener('change', (e) =&gt; {   \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   const prop = e.target.id   \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430   const value = e.target.value    \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043a\u0430\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c   \/\/ \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   \/\/ \u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f   if (e.target.parentElement.id === 'flexContainerProps') {     flexContainer.style[prop] = value   } else {     const selectedItem = document.querySelector('.selected')     selectedItem.style[prop] = value   } })  \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0431\u043e\u0440 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 flexContainer.addEventListener('click', (e) =&gt; {   \/\/ \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u043a \u043f\u043e \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443   if (     e.target.className !== 'flex-item' ||     e.target.classList.contains('selected')   )     return    \/\/ \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 &quot;selected&quot; \u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   if (document.querySelector('.selected') !== null)     document.querySelector('.selected').classList.remove('selected')    \/\/ \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u043e\u0432\u043e\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443   e.target.classList.add('selected')    \/\/ \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e &quot;\u0444\u043b\u0435\u043a\u0441-\u0441\u0432\u043e\u0439\u0441\u0442\u0432&quot;   \/\/ \u0418 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0438\u043d\u043f\u0443\u0442\u0430\u043c \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u0443   \/\/ \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u0435\u0440\u0432\u043e\u043c\u0443, \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430    \/\/ \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442   const getStyle = (property, element = e.target) =&gt;     getComputedStyle(element).getPropertyValue(property)    \/\/ \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0438\u043c\u0435\u044e\u0449\u0438\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 &quot;id&quot;, \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e   \/\/ \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f   order.value = getStyle('order')   flexGrow.value = getStyle('flex-grow')   flexShrink.value = getStyle('flex-shrink')   alignSelf.value = getStyle('align-self') }) <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440\u0430 \u0432\u0435\u0441\u044c\u043c\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d. \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u044d\u0442\u043e\u0433\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 Flexbox.<\/p>\n<p>  \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440 \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c Grid \u2014 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f.<\/p>\n<div class=\"oembed\"><iframe id=\"5fb4fdecfd7c16e10ee4a7e0\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fb4fdecfd7c16e10ee4a7e0\"><\/iframe><\/div>\n<p>  \u0412\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u2014 <a href=\"https:\/\/htmltemplate.site\/\" rel=\"nofollow\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 HTML-\u0448\u0430\u0431\u043b\u043e\u043d<\/a>.<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/528672\/\"> https:\/\/habr.com\/ru\/post\/528672\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/to\/cr\/o1\/tocro1luku9caqtlqptb22zhr-u.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u043e\u043b\u043d\u043e\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e-\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c CSS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 Flexbox \u0438 Grid.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438: <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" rel=\"nofollow\">A Complete Guide to Flexbox<\/a>, <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" rel=\"nofollow\">A Complete Guide to Grid<\/a>.<\/p>\n<p>  \u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0430\u0441 \u0436\u0434\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440\u0430 \u043f\u043e Flexbox.<\/p>\n<p>  \u0411\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0439.<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<ul>\n<li><a href=\"#flex\">Flexbox<\/a><\/li>\n<li>\n<ul>\n<li><a href=\"#flex-term\">\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/a><\/li>\n<li><a href=\"#flex-container\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043b\u0435\u043a\u0441-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/a><\/li>\n<li><a href=\"#flex-items\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043b\u0435\u043a\u0441-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#flex-examples\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><\/li>\n<li><a href=\"#flex-resources\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#grid\">Grid<\/a><\/li>\n<li>\n<ul>\n<li><a href=\"#grid-term\">\u0422\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044f<\/a><\/li>\n<li><a href=\"#grid-example\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a><\/li>\n<li><a href=\"#grid-container\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0438\u0434-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/a><\/li>\n<li><a href=\"#grid-elements\">\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0438\u0434-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#grid-resources\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#tutorial\">\u0422\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/a><\/li>\n<\/ul>\n<p>  <\/div>\n<\/p><\/div>\n<p>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-313373","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/313373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=313373"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/313373\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=313373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=313373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=313373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}