{"id":379756,"date":"2024-06-25T03:44:57","date_gmt":"2024-06-25T03:44:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=379756"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=379756","title":{"rendered":"<span>\u041f\u043e\u043b\u043d\u044b\u0439 \u0433\u0430\u0439\u0434 \u043f\u043e CSS Flexbox \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e HTML&amp;CSS \u0438\u0437 \u0441\u0435\u0440\u0438\u0438. \u0418 \u043d\u0430\u0447\u0430\u0442\u044c \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u0441 Flexbox. \u0412 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0443\u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0433\u0430\u0439\u0434\u043e\u0432 \u043f\u043e Flexbox \u0432 CSS. \u041d\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u0442\u0435\u043c\u0443 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445. \u0410 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043b\u0430\u0439\u0444\u0445\u0430\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0430\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435\u043e-\u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u043e\u043b\u0438\u043a \u043d\u0430 YouTube:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6668d431aeb5569d7b9256ae\" data-style=\"\" id=\"6668d431aeb5569d7b9256ae\" width=\"\"><\/div>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d<\/h2>\n<p>Flexbox \u0432 CSS \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/ae2\/f75\/244\/ae2f752449afed1140bcdf0a5574afab.jpg\" alt=\"\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\" title=\"\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\" width=\"2290\" height=\"1440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ae2\/f75\/244\/ae2f752449afed1140bcdf0a5574afab.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/figcaption><\/div>\n<\/figure>\n<p>Flexbox \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0438\u0431\u043a\u0438\u0445 \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e flex-\u0441\u0435\u0442\u043a\u0438 \u043b\u0435\u0433\u043a\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/fdd\/91b\/3a9\/fdd91b3a9ca6943052abc298134280e7.jpg\" alt=\"\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u2013 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438\" title=\"\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u2013 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438\" width=\"2290\" height=\"1440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fdd\/91b\/3a9\/fdd91b3a9ca6943052abc298134280e7.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u2013 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/h3>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. <\/p>\n<p>Div \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>container<\/code> \u2013 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0431\u0435\u043b\u043e\u0439 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0432 \u0440\u043e\u043b\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u0441\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>item<\/code>. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 flex-\u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"container\">   &lt;div class=\"item item-1\">item 1&lt;\/div>   &lt;div class=\"item item-2\">item 2&lt;\/div>   &lt;div class=\"item item-3\">item 3&lt;\/div> &lt;\/div><\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dbc\/a92\/aad\/dbca92aad1434df6e5f2c5b273dc0942.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dbc\/a92\/aad\/dbca92aad1434df6e5f2c5b273dc0942.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435 \u043d\u0430 Codepen. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0441\u0430\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0432\u0441\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438, \u0442\u0430\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/66771beeaeb5569d7b9a025c\" data-style=\"\" id=\"66771beeaeb5569d7b9a025c\" width=\"\"><\/div>\n<h3>display: flex<\/h3>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex<\/code> \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>display<\/code>. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>display: block<\/code>. <\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>display: flex<\/code>. \u0418 \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. <\/p>\n<pre><code class=\"css\">.container {   display: flex; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/745\/db1\/c46\/745db1c46bf9863509082fd93dc89f46.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c display: flex\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c display: flex\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/745\/db1\/c46\/745db1c46bf9863509082fd93dc89f46.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c display: flex<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u043c \u043a\u0430\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u043b\u0438\u0441\u044c \u0432 \u0440\u044f\u0434.<\/p>\n<h3>flex-direction<\/h3>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u044c\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0441\u044c. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>flex-direction<\/code>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>column<\/code> \u0443 <code>flex-direction<\/code>, \u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-direction: column; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/802\/0cf\/c55\/8020cfc55922ea39f1106eb2d6ea13f9.png\" alt=\"flex-direction: column\" title=\"flex-direction: column\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/802\/0cf\/c55\/8020cfc55922ea39f1106eb2d6ea13f9.png\"\/><\/p>\n<div><figcaption>flex-direction: column<\/figcaption><\/div>\n<\/figure>\n<p>\u0423 <code>flex-direction<\/code> \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438 \u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>row-reverse<\/code> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-direction: row-reverse; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a9\/bd1\/210\/9a9bd1210bf9ca9f81b67d6aa44e23fe.png\" alt=\"flex-direction: row-reverse\" title=\"flex-direction: row-reverse\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9a9\/bd1\/210\/9a9bd1210bf9ca9f81b67d6aa44e23fe.png\"\/><\/p>\n<div><figcaption>flex-direction: row-reverse<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 <code>column-reverse<\/code> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-direction: column-reverse; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ba0\/a58\/973\/ba0a589738c80eb9406c5258765a8cac.png\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ba0\/a58\/973\/ba0a589738c80eb9406c5258765a8cac.png\"\/><\/p>\n<div><figcaption>flex-direction: column-reverse<\/figcaption><\/div>\n<\/figure>\n<h3>flex-wrap<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e \u043e\u043d\u0438 \u0443\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0432 1 \u0440\u044f\u0434 \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"container\">   &lt;div class=\"item item-1\">item 1&lt;\/div>   &lt;div class=\"item item-2\">item 2&lt;\/div>   &lt;div class=\"item item-3\">item 3&lt;\/div>   &lt;div class=\"item item-4\">item 4&lt;\/div>   &lt;div class=\"item item-5\">item 5&lt;\/div>   &lt;div class=\"item item-6\">item 6&lt;\/div>   &lt;div class=\"item item-7\">item 7&lt;\/div>   &lt;div class=\"item item-8\">item 8&lt;\/div>   &lt;div class=\"item item-9\">item 9&lt;\/div> &lt;\/div><\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cfe\/890\/0eb\/cfe8900eb75f0796f7ce2a3af6241576.png\" alt=\"flex-wrap: no-wrap\" title=\"flex-wrap: no-wrap\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cfe\/890\/0eb\/cfe8900eb75f0796f7ce2a3af6241576.png\"\/><\/p>\n<div><figcaption>flex-wrap: no-wrap<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>flex-wrap<\/code>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c <code>flex-wrap: wrap<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0443\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. <\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap; \/* default - flex-wrap: no-wrap *\/ }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a0b\/510\/33e\/a0b51033ed82eb1e7fa17eda11a36f55.png\" alt=\"flex-wrap: wrap\" title=\"flex-wrap: wrap\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a0b\/510\/33e\/a0b51033ed82eb1e7fa17eda11a36f55.png\"\/><\/p>\n<div><figcaption>flex-wrap: wrap<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>wrap-reverse<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0447\u043d\u0443\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043d\u0438\u0436\u043d\u0435\u0439 \u043b\u0438\u043d\u0438\u0438 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0443\u0442 \u0443\u0436\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap-reverse; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe3\/717\/151\/fe3717151f07110000c41c6e55f16467.png\" alt=\"flex-wrap: wrap-reverse\" title=\"flex-wrap: wrap-reverse\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe3\/717\/151\/fe3717151f07110000c41c6e55f16467.png\"\/><\/p>\n<div><figcaption>flex-wrap: wrap-reverse<\/figcaption><\/div>\n<\/figure>\n<h3>justify-content<\/h3>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>justify-content<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-end<\/code>, \u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u043c\u0443\u0442\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: flex-end; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1f7\/156\/d2f\/1f7156d2f7c8e3409fe017b364513a5f.png\" alt=\"justify-content: flex-end\" title=\"justify-content: flex-end\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1f7\/156\/d2f\/1f7156d2f7c8e3409fe017b364513a5f.png\"\/><\/p>\n<div><figcaption>justify-content: flex-end<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 <code>flex-start<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u043c\u0443\u0442\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e. \u0418 \u044d\u0442\u043e, \u043a\u0441\u0442\u0430\u0442\u0438, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. <\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: flex-start; \/* default *\/ }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dee\/343\/2d1\/dee3432d12e6ceb6803bee5c4360993d.png\" alt=\"justify-content: flex-start\" title=\"justify-content: flex-start\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dee\/343\/2d1\/dee3432d12e6ceb6803bee5c4360993d.png\"\/><\/p>\n<div><figcaption>justify-content: flex-start<\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0438\u0436\u0435.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>center<\/code> \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0446\u0435\u043d\u0442\u0440.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: center; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/058\/954\/80e\/05895480e644b0c321de9cae8bdfece4.png\" alt=\"justify-content: center\" title=\"justify-content: center\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/058\/954\/80e\/05895480e644b0c321de9cae8bdfece4.png\"\/><\/p>\n<div><figcaption>justify-content: center<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>space-beetwen<\/code> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u043e \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u0435\u0442 \u0438\u0445 \u043f\u043e \u043a\u0440\u0430\u044f\u043c.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: space-between; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/249\/596\/16b\/24959616b67e6e5cc078c53c1a3a27e7.png\" alt=\"justify-content: space-between\" title=\"justify-content: space-between\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/249\/596\/16b\/24959616b67e6e5cc078c53c1a3a27e7.png\"\/><\/p>\n<div><figcaption>justify-content: space-between<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>space-around<\/code> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u0432\u043e\u0439\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043b\u044e\u0441\u0443\u044e\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: space-around; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c26\/76b\/733\/c2676b7338a1b34dad33e64adcbef2c7.png\" alt=\"justify-content: space-around\" title=\"justify-content: space-around\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c26\/76b\/733\/c2676b7338a1b34dad33e64adcbef2c7.png\"\/><\/p>\n<div><figcaption>justify-content: space-around<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>space-evenly<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: space-evenly; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d89\/b20\/ea8\/d89b20ea842be422c6fb86abbb7e27f6.png\" alt=\"justify-content: space-evenly\" title=\"justify-content: space-evenly\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d89\/b20\/ea8\/d89b20ea842be422c6fb86abbb7e27f6.png\"\/><\/p>\n<div><figcaption>justify-content: space-evenly<\/figcaption><\/div>\n<\/figure>\n<h3>align-items<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u2013 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>align-items<\/code>. \u041e\u043d\u043e \u0437\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u0430\u043a \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438.<\/p>\n<p>\u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0430\u0437\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u0430\u0436\u0434\u043e\u043c item.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"item item-1\">     item 1     &lt;div>text&lt;\/div>     &lt;div>text&lt;\/div> &lt;\/div> &lt;div class=\"item item-2\">     item 2     &lt;div>text&lt;\/div> &lt;\/div> &lt;div class=\"item item-3\">     item 3 &lt;\/div><\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/522\/12f\/c53\/52212fc535eab70c9d8a1a9677885878.png\" alt=\"align-items: stretch\" title=\"align-items: stretch\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/522\/12f\/c53\/52212fc535eab70c9d8a1a9677885878.png\"\/><\/p>\n<div><figcaption>align-items: stretch<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u043b\u0438\u0441\u044c \u043d\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>align-items<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>stretch<\/code> \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-start<\/code> \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0432\u0435\u0440\u0445\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: flex-start; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c14\/af7\/ae0\/c14af7ae0d4802758a9f62968be75638.png\" alt=\"align-items: flex-start\" title=\"align-items: flex-start\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c14\/af7\/ae0\/c14af7ae0d4802758a9f62968be75638.png\"\/><\/p>\n<div><figcaption>align-items: flex-start<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-end<\/code>, \u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u043c\u0443\u0442\u0441\u044f \u043a\u043d\u0438\u0437\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: flex-end; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9db\/5fc\/319\/9db5fc3193130f9b60f087412450f299.png\" alt=\"align-items: flex-end\" title=\"align-items: flex-end\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9db\/5fc\/319\/9db5fc3193130f9b60f087412450f299.png\"\/><\/p>\n<div><figcaption>align-items: flex-end<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>center<\/code> \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: center; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7cc\/3b5\/5c4\/7cc3b55c49d4604802957304e76d323b.png\" alt=\"align-items: center\" title=\"align-items: center\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7cc\/3b5\/5c4\/7cc3b55c49d4604802957304e76d323b.png\"\/><\/p>\n<div><figcaption>align-items: center<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>baseline<\/code> \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 <code>flex-start<\/code>.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: baseline; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/987\/2bf\/a46\/9872bfa4664a7d6658743a66a9749402.png\" alt=\"align-items: baseline\" title=\"align-items: baseline\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/987\/2bf\/a46\/9872bfa4664a7d6658743a66a9749402.png\"\/><\/p>\n<div><figcaption>align-items: baseline<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0440\u0430\u0437\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u044a\u0435\u0437\u0436\u0430\u044e\u0442. <\/p>\n<pre><code class=\"css\">.item-1 {   font-size: 32px; }  .item-2 {   font-size: 64px; }  .item-3 {   font-size: 16px; } <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f12\/2c4\/b42\/f122c4b4247d3535f153eeb935237ff3.png\" alt=\"align-items: baseline (\u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0430)\" title=\"align-items: baseline (\u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0430)\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f12\/2c4\/b42\/f122c4b4247d3535f153eeb935237ff3.png\"\/><\/p>\n<div><figcaption>align-items: baseline (\u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0430)<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>baseline<\/code> \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043d\u0438\u0436\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u0430, \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 baseline. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0436\u0435\u043b\u0442\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435.<\/p>\n<h3>gap<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u2013 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>gap<\/code>. \u041e\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>gap<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>16px<\/code>.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap;   gap: 16px; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4c2\/afa\/d33\/4c2afad337038efd9f085e5fa1a9dea3.png\" alt=\"gap: 16px\" title=\"gap: 16px\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4c2\/afa\/d33\/4c2afad337038efd9f085e5fa1a9dea3.png\"\/><\/p>\n<div><figcaption>gap: 16px<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. <\/p>\n<p>\u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u2013 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c 2 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0440\u044f\u0434. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>16px<\/code> \u0438 <code>32px<\/code>. \u0418 \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap;   gap: 16px 32px; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f3b\/c10\/4fa\/f3bc104fa931b2a8715e2d682b58f6ac.png\" alt=\"gap: 16px 32px\" title=\"gap: 16px 32px\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f3b\/c10\/4fa\/f3bc104fa931b2a8715e2d682b58f6ac.png\"\/><\/p>\n<div><figcaption>gap: 16px 32px<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043a\u0430 \u044d\u0442\u043e \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u0432\u0441\u0435 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0441\u0430\u043c\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0436\u0430\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<h3>order<\/h3>\n<p>\u0418 \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>order<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u0435\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u043e\u0438\u0442 <code>order: 0<\/code> \u0438 \u0442\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u044b \u0432 HTML. <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order<\/code> \u043d\u0430 1 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 . <\/p>\n<pre><code class=\"css\">.item-2 {   order: 1; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dc7\/c80\/739\/dc7c8073981699dfcf22338f99546082.png\" alt=\"&quot;order: 1&quot; \u0443 &quot;item 2&quot;\" title=\"&quot;order: 1&quot; \u0443 &quot;item 2&quot;\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dc7\/c80\/739\/dc7c8073981699dfcf22338f99546082.png\"\/><\/p>\n<div><figcaption>&#171;order: 1&#187; \u0443 &#171;item 2&#187;<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0438\u0434\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0447\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0432 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0435\u0446. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order: 0<\/code>, \u0443 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order: 0<\/code>, \u0430 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order: 1<\/code> \u0438 \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0435\u0446. <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c <code>order<\/code> \u0443 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n<pre><code class=\"css\">.item-1 {   order: 5; }  .item-2 {   order: 3; }  .item-3 {   order: 1; } <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/aa3\/dbe\/7c5\/aa3dbe7c5ae94e17a09de681d7b258f9.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 order\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 order\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aa3\/dbe\/7c5\/aa3dbe7c5ae94e17a09de681d7b258f9.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 order<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, <code>order<\/code> \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0442\u0438 \u043f\u043e\u0434\u0440\u044f\u0434 1 \u043a \u043e\u0434\u043d\u043e\u043c\u0443. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 CSS \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u043a\u0430\u043a\u043e\u0435 \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n<h3>align-self<\/h3>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>align-self<\/code> \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <code>align-items<\/code> \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u0435\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435. <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043c <code>align-items: center<\/code> \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>align-self<\/code> \u0443\u043a\u0430\u0436\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-start<\/code>. <\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: center; }  .item-2 {   align-self: flex-start; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8a3\/8b5\/9bd\/8a38b59bd6597c21b281777a57046152.png\" alt=\"align-self: flex-start\" title=\"align-self: flex-start\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8a3\/8b5\/9bd\/8a38b59bd6597c21b281777a57046152.png\"\/><\/p>\n<div><figcaption>align-self: flex-start<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435, \u0445\u043e\u0442\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e-\u0446\u0435\u043d\u0442\u0440\u0443. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 <code>flex-end<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u043a\u043e\u0447\u0438\u0442 \u0432\u043d\u0438\u0437.<\/p>\n<pre><code class=\"css\">.item-2 {   align-self: flex-end; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cf4\/0d2\/f5c\/cf40d2f5c34d6e22b242c3d6498fe84f.png\" alt=\"align-self: flex-end\" title=\"align-self: flex-end\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cf4\/0d2\/f5c\/cf40d2f5c34d6e22b242c3d6498fe84f.png\"\/><\/p>\n<div><figcaption>align-self: flex-end<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e-\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>align-self<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>align-items<\/code> \u0443 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u2013 <code>flex-start<\/code>, <code>flex-end<\/code>, <code>center<\/code>, <code>baseline<\/code>, <code>stretch<\/code>.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0435\u0440\u0438\u0438 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0418\u043c\u0435\u043d\u043d\u043e \u0441 \u043d\u0438\u043c\u0438 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0443 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432.<\/p>\n<h3>flex-grow<\/h3>\n<p>\u0418 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>flex-grow<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u2013 \u044d\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043d\u0435\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u043e \u0436\u0435\u043b\u0442\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u043d\u0438\u0436\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/326\/6ae\/a5f\/3266aea5f788000676e556f819fd0371.png\" alt=\"\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\" title=\"\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/326\/6ae\/a5f\/3266aea5f788000676e556f819fd0371.png\"\/><\/p>\n<div><figcaption>\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-grow<\/code> \u2013 \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0440\u0443\u0433 \u043a \u0434\u0440\u0443\u0433\u0443.<\/p>\n<p>\u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>flex-grow<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 0. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u044f\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0436\u0435\u043c 1, \u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u044d\u0442\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e.<\/p>\n<pre><code class=\"css\">.item {   flex-grow: 1; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/974\/36a\/726\/97436a7260a289dfab27582a469ff765.png\" alt=\"flex-grow: 1\" title=\"flex-grow: 1\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/974\/36a\/726\/97436a7260a289dfab27582a469ff765.png\"\/><\/p>\n<div><figcaption>flex-grow: 1<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-grow<\/code> \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 0, \u0438 \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043e\u043d \u0441\u043d\u043e\u0432\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f. <\/p>\n<pre><code class=\"css\">.item {   flex-grow: 1; }  .item-1 {   flex-grow: 0; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b43\/ba4\/0b5\/b43ba40b5f8f05c8c380048b8d4dfbe8.png\" alt=\"\u0414\u0435\u043b\u0435\u0436\u043a\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\" title=\"\u0414\u0435\u043b\u0435\u0436\u043a\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b43\/ba4\/0b5\/b43ba40b5f8f05c8c380048b8d4dfbe8.png\"\/><\/p>\n<div><figcaption>\u0414\u0435\u043b\u0435\u0436\u043a\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u0436\u0435\u043b\u0442\u044b\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u0430 \u0437\u043e\u043d\u0430 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0435\u0441\u043b\u0438 \u0431\u044b \u0443 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u043e\u044f\u043b <code>flex-grow: 0<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 0 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0434\u0435\u043b\u0435\u0436\u043a\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u0410 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 2 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u0435\u043b\u044f\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043f\u043e \u043d\u0438\u0436\u043d\u0435\u0439 \u0448\u043a\u0430\u043b\u0435 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-grow<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n<pre><code class=\"css\">.item-1 {   flex-grow: 1; }  .item-2 {   flex-grow: 2; }  .item-3 {   flex-grow: 3; } <\/code><\/pre>\n<p>\u0425\u043e\u0447\u0443 \u0435\u0449\u0435 \u0440\u0430\u0437 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442, \u0447\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432 2 \u0440\u0430\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e, \u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 3 \u0440\u0430\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e. \u0412\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432 \u0440\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f\u0445.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/84f\/148\/bb9\/84f148bb9f29763bdaa60b9eb5ae311c.png\" alt=\"\u0414\u0435\u043b\u0435\u0436\u043a\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\" title=\"\u0414\u0435\u043b\u0435\u0436\u043a\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/84f\/148\/bb9\/84f148bb9f29763bdaa60b9eb5ae311c.png\"\/><\/p>\n<div><figcaption>\u0414\u0435\u043b\u0435\u0436\u043a\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f 1 \u0434\u043e\u043b\u044f \u043e\u0442 \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430, \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f 2 \u0434\u043e\u043b\u0438, \u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0434\u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f 3 \u0434\u043e\u043b\u0438. <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0442\u0430\u043a \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043b\u044f <code>.item-1<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-grow<\/code> \u0431\u043e\u043b\u044c\u0448\u0435 0. <\/p>\n<pre><code class=\"css\">.item-1 {   flex-grow: 2; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6ec\/e14\/1dc\/6ece141dcb2f9525950c01975ceac401.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c\" width=\"1868\" height=\"1380\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ec\/e14\/1dc\/6ece141dcb2f9525950c01975ceac401.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0438 \u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0435\u0447\u0435\u0433\u043e.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u043e\u0442 0 \u0438 1 \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u043c\u0435\u043d\u043d\u043e 0 \u0438 1.<\/p>\n<h3>flex-basis<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u2013 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>flex-basis<\/code>. \u042d\u0442\u043e \u043f\u0440\u044f\u043c \u0441\u0443\u043f\u0435\u0440 \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<code>flex-basis<\/code>\u00a0\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0437\u0430\u0439\u043c\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u00a0<code>flex-basis<\/code>\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u043e\u0439\u00a0<code>width<\/code>, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.\u00a0\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<code>flex-basis<\/code>\u00a0\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043b\u0438\u0448\u044c\u00a0<em>\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e<\/em>\u00a0\u0448\u0438\u0440\u0438\u043d\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c <code>flex-basis: 200px<\/code>, \u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0444\u0430\u043a\u0442 \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 <code>200px<\/code> \u2013 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0431\u043e\u043b\u044c\u0448\u0435, \u0442\u0430\u043a \u0438 \u043c\u0435\u043d\u044c\u0448\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u043a\u0430\u0436\u0435\u043c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>flex-basis 200px<\/code>:<\/p>\n<pre><code class=\"css\">.item {   flex-basis: 200px; <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/291\/f4d\/37e\/291f4d37e229bd138389dadc2b15e2b8.png\" alt=\"flex-basis: 200px\" title=\"flex-basis: 200px\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/291\/f4d\/37e\/291f4d37e229bd138389dadc2b15e2b8.png\"\/><\/p>\n<div><figcaption>flex-basis: 200px<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u0435\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043b\u0430 200px. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u043a\u0430\u0436\u0435\u043c 50px. <\/p>\n<pre><code class=\"css\">.item {   flex-basis: 50px; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe3\/c52\/4c3\/fe3c524c358703b9bb6d42c99d88b6f5.png\" alt=\"flex-basis: 50px\" title=\"flex-basis: 50px\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe3\/c52\/4c3\/fe3c524c358703b9bb6d42c99d88b6f5.png\"\/><\/p>\n<div><figcaption>flex-basis: 50px<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0431\u041e\u043b\u044c\u0448\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 86px. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0441\u0436\u0430\u043b\u0438\u0441\u044c \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b, \u0434\u0430\u043b\u044c\u0448\u0435 \u0441\u043b\u043e\u0432\u043e <code>item<\/code> \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440.<\/p>\n<p>\u041f\u043e\u0445\u043e\u0436\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0435\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u043e <code>flex-basis<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>300px<\/code>. <\/p>\n<pre><code class=\"css\">.item {   flex-basis: 300px; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cee\/a02\/9a8\/ceea029a8ed220d03e73922af86a9cf3.png\" alt=\"flex-basis: 300px\" title=\"flex-basis: 300px\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cee\/a02\/9a8\/ceea029a8ed220d03e73922af86a9cf3.png\"\/><\/p>\n<div><figcaption>flex-basis: 300px<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043c\u0435\u043d\u044c\u0448\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u2013 262px \u0432\u043c\u0435\u0441\u0442\u043e 300px. \u0418\u043d\u0430\u0447\u0435 \u043e\u043d\u0438 \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440.<\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0434\u043b\u044f <code>flex-basis<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u043f\u0438\u0448\u0435\u043c 25%:<\/p>\n<pre><code class=\"css\">.item {   flex-basis: 25%; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ec0\/4e1\/342\/ec04e134209660cd9c95d158fbeeb183.png\" alt=\"flex-basis: 25%\" title=\"flex-basis: 25%\" width=\"1956\" height=\"1468\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ec0\/4e1\/342\/ec04e134209660cd9c95d158fbeeb183.png\"\/><\/p>\n<div><figcaption>flex-basis: 25%<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043d\u044f\u043b\u0438 1\/4 \u0447\u0430\u0441\u0442\u044c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u0442\u043a\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445. \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u0442\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<h3>flex-shrink<\/h3>\n<p><code>flex-shrink<\/code>\u00a0\u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0435\u0441\u043b\u0438 \u043c\u0435\u0441\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043c\u0435\u0441\u0442\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 <code>flex-basis<\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u043b\u0438\u0441\u044c. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0432 <code>600px<\/code> \u0434\u043b\u044f flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   width: 600px; }  .item {   flex-basis: 300px; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f5f\/30d\/093\/f5f30d0936a60967305b2ccce3731693.png\" alt=\"flex-basis: 300px;\" title=\"flex-basis: 300px;\" width=\"1698\" height=\"1456\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f5f\/30d\/093\/f5f30d0936a60967305b2ccce3731693.png\"\/><\/p>\n<div><figcaption>flex-basis: 300px;<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0443 <code>200px<\/code>, \u0430 \u043d\u0435 <code>300px<\/code>, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435. \u0425\u043e\u0442\u044f \u0432 \u0438\u0434\u0435\u0430\u043b\u0435 \u0432\u0441\u0435 \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 <code>900px<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0431\u044b\u043b \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c flex-shrink: 0, \u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e <code>900px<\/code>. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043b\u0435\u0437\u0443\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. <\/p>\n<pre><code class=\"css\">.item {   flex-basis: 300px;   flex-shrink: 0; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b25\/cb9\/6dd\/b25cb96dd65f977efc16b5c212571f01.png\" alt=\"flex-basis: 300px; flex-shrink: 0;\" title=\"flex-basis: 300px; flex-shrink: 0;\" width=\"2156\" height=\"1630\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b25\/cb9\/6dd\/b25cb96dd65f977efc16b5c212571f01.png\"\/><\/p>\n<div><figcaption>flex-basis: 300px; flex-shrink: 0;<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>flex-shink: 0<\/code> \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f. \u0418 \u043e\u043d\u0438 \u0441\u0442\u0440\u043e\u0433\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432\u043e <code>flex-basis<\/code>. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 <code>1<\/code>, \u0442\u043e \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. <code>1<\/code> &#8212; \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>flex-shrink<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0439 <code>flex-shrink<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0442\u0438\u0441\u044f.<\/p>\n<pre><code class=\"css\">.item {   flex-basis: 300px; }  .item-1 {   flex-shrink: 1; }  .item-2 {   flex-shrink: 2; }  .item-1 {   flex-shrink: 3; } <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2be\/0a6\/5d3\/2be0a65d3b05462e937c0d335340bf7e.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 flex-shrink\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 flex-shrink\" width=\"1820\" height=\"1598\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2be\/0a6\/5d3\/2be0a65d3b05462e937c0d335340bf7e.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 flex-shrink<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0423 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 <code>150px<\/code>, \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e <code>200px<\/code>, \u0430 \u0443 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e <code>250px<\/code>. \u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c?<\/p>\n<p>\u041d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u043d\u0430 <code>300px<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0435\u0437\u0434\u0435 \u0431\u044b\u043b\u0430 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438\u0437 <code>flex-basis<\/code>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u044d\u0442\u0438 <code>300px<\/code> \u043e\u0442\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u0443 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0443 <code>flex-shrink<\/code>. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u0442\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430 <code>150px<\/code>, \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430 <code>100px<\/code>, \u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430 <code>50px<\/code>.<\/p>\n<h3>\u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c<\/h3>\n<p>\u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0442\u0440\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 (<code>flex-grow,<\/code> <code>flex-shrink<\/code> \u0438 <code>flex-basis<\/code>) \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">.item {   flex:  1 1 200px; }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 <code>flex-grow<\/code>, \u0432\u0442\u043e\u0440\u043e\u0435 \u0437\u0430 <code>flex-shrink<\/code>, \u0430 \u0442\u0440\u0435\u0442\u044c\u0435 \u0437\u0430 <code>flex-basis<\/code>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u043e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043f\u043e\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u2013 \u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0439.<\/p>\n<h2>\u041b\u0430\u0439\u0444\u0445\u0430\u043a\u0438<\/h2>\n<p>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 \u0432\u0441\u0435 flex \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u0430\u043a \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0442\u0430\u043a \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0432\u0430\u043c \u043f\u043e\u043a\u0430\u0436\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438. \u042d\u0442\u043e \u043c\u043e\u0438 \u043b\u0430\u0439\u0444\u0445\u0430\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0430\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u041d\u0430 \u043c\u043e\u0435\u043c <a href=\"https:\/\/youtu.be\/40AHiJDa20M\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e \u0432 YouTube<\/a> \u044d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0410 \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u043e\u0434 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<h3>\u0426\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u043b\u0430\u0439\u0444\u0445\u0430\u043a \u2013 \u044d\u0442\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0445\u0430\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0430\u043c \u043d\u0430 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/66771bf1ee339fd48b24fac1\" data-style=\"\" id=\"66771bf1ee339fd48b24fac1\" width=\"\"><\/div>\n<h3>\u0421\u0435\u0442\u043a\u0430<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0443\u0442\u044c \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041d\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0433\u0434\u0435 \u0431\u044b \u044f \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0442\u0430\u043a\u0443\u044e \u0441\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u0441\u0435\u0431\u044f.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/66771bf16748d7d46fc23239\" data-style=\"\" id=\"66771bf16748d7d46fc23239\" width=\"\"><\/div>\n<h3>\u0420\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e<\/h3>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u2013 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e. \u042d\u0442\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u043d\u0435\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u201c\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u201d. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c \u043e\u043d\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b. \u0410 \u0432\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. <\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/66771bf128dfc09d9e4c985d\" data-style=\"\" id=\"66771bf128dfc09d9e4c985d\" width=\"\"><\/div>\n<h2>\u0418\u0442\u043e\u0433<\/h2>\n<p>\u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u043b\u0435\u043a\u0441\u0430\u043c\u0438 \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u0430\u0442\u0443\u0448\u043a\u0443. \u0422\u0430\u043a\u0436\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0432\u0430\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e <a href=\"https:\/\/github.com\/pavlenkovit\/html-and-css\/tree\/main\/flexbox\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435 \u0432 github<\/a>.<\/p>\n<hr\/>\n<p>\u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430\u00a0<a href=\"https:\/\/t.me\/vaitishnaya\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c\u2011\u043a\u0430\u043d\u0430\u043b \u0412\u0430\u0439\u0442\u0438\u0448\u043d\u0430\u044f<\/a>\u00a0\u2014 \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0442\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0438 \u043f\u0438\u0448\u0443 \u0447\u0435\u0441\u0442\u043d\u043e \u043f\u0440\u043e\u00a0IT<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/816349\/\"> https:\/\/habr.com\/ru\/articles\/816349\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e HTML&amp;CSS \u0438\u0437 \u0441\u0435\u0440\u0438\u0438. \u0418 \u043d\u0430\u0447\u0430\u0442\u044c \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u0441 Flexbox. \u0412 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0443\u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0433\u0430\u0439\u0434\u043e\u0432 \u043f\u043e Flexbox \u0432 CSS. \u041d\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u0442\u0435\u043c\u0443 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445. \u0410 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043b\u0430\u0439\u0444\u0445\u0430\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0430\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435\u043e-\u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u043e\u043b\u0438\u043a \u043d\u0430 YouTube:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6668d431aeb5569d7b9256ae\" data-style=\"\" id=\"6668d431aeb5569d7b9256ae\" width=\"\"><\/div>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Flexbox \u0438 \u0437\u0430\u0447\u0435\u043c \u043e\u043d<\/h2>\n<p>Flexbox \u0432 CSS \u2014 \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/figcaption><\/div>\n<\/figure>\n<p>Flexbox \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0438\u0431\u043a\u0438\u0445 \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e flex-\u0441\u0435\u0442\u043a\u0438 \u043b\u0435\u0433\u043a\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u2013 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/h3>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. <\/p>\n<p>Div \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>container<\/code> \u2013 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0431\u0435\u043b\u043e\u0439 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0432 \u0440\u043e\u043b\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u0441\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>item<\/code>. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 flex-\u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"container\">   &lt;div class=\"item item-1\">item 1&lt;\/div>   &lt;div class=\"item item-2\">item 2&lt;\/div>   &lt;div class=\"item item-3\">item 3&lt;\/div> &lt;\/div><\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435 \u043d\u0430 Codepen. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0441\u0430\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0432\u0441\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438, \u0442\u0430\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0449\u0435 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/66771beeaeb5569d7b9a025c\" data-style=\"\" id=\"66771beeaeb5569d7b9a025c\" width=\"\"><\/div>\n<h3>display: flex<\/h3>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex<\/code> \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>display<\/code>. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>display: block<\/code>. <\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>display: flex<\/code>. \u0418 \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. <\/p>\n<pre><code class=\"css\">.container {   display: flex; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c display: flex<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u043c \u043a\u0430\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u043b\u0438\u0441\u044c \u0432 \u0440\u044f\u0434.<\/p>\n<h3>flex-direction<\/h3>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0442\u0430\u043a \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u044c\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0441\u044c. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>flex-direction<\/code>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>column<\/code> \u0443 <code>flex-direction<\/code>, \u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-direction: column; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-direction: column<\/figcaption><\/div>\n<\/figure>\n<p>\u0423 <code>flex-direction<\/code> \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438 \u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>row-reverse<\/code> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-direction: row-reverse; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-direction: row-reverse<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 <code>column-reverse<\/code> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-direction: column-reverse; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-direction: column-reverse<\/figcaption><\/div>\n<\/figure>\n<h3>flex-wrap<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e \u043e\u043d\u0438 \u0443\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0432 1 \u0440\u044f\u0434 \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"container\">   &lt;div class=\"item item-1\">item 1&lt;\/div>   &lt;div class=\"item item-2\">item 2&lt;\/div>   &lt;div class=\"item item-3\">item 3&lt;\/div>   &lt;div class=\"item item-4\">item 4&lt;\/div>   &lt;div class=\"item item-5\">item 5&lt;\/div>   &lt;div class=\"item item-6\">item 6&lt;\/div>   &lt;div class=\"item item-7\">item 7&lt;\/div>   &lt;div class=\"item item-8\">item 8&lt;\/div>   &lt;div class=\"item item-9\">item 9&lt;\/div> &lt;\/div><\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-wrap: no-wrap<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>flex-wrap<\/code>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c <code>flex-wrap: wrap<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0443\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. <\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap; \/* default - flex-wrap: no-wrap *\/ }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-wrap: wrap<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>wrap-reverse<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0447\u043d\u0443\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043d\u0438\u0436\u043d\u0435\u0439 \u043b\u0438\u043d\u0438\u0438 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0443\u0442 \u0443\u0436\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap-reverse; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-wrap: wrap-reverse<\/figcaption><\/div>\n<\/figure>\n<h3>justify-content<\/h3>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>justify-content<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043e\u0441\u0438. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-end<\/code>, \u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u043c\u0443\u0442\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: flex-end; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>justify-content: flex-end<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 <code>flex-start<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u043c\u0443\u0442\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e. \u0418 \u044d\u0442\u043e, \u043a\u0441\u0442\u0430\u0442\u0438, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. <\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: flex-start; \/* default *\/ }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>justify-content: flex-start<\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0438\u0436\u0435.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>center<\/code> \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0446\u0435\u043d\u0442\u0440.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: center; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>justify-content: center<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>space-beetwen<\/code> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u043e \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u0435\u0442 \u0438\u0445 \u043f\u043e \u043a\u0440\u0430\u044f\u043c.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: space-between; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>justify-content: space-between<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>space-around<\/code> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u0432\u043e\u0439\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043b\u044e\u0441\u0443\u044e\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: space-around; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>justify-content: space-around<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>space-evenly<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   justify-content: space-evenly; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>justify-content: space-evenly<\/figcaption><\/div>\n<\/figure>\n<h3>align-items<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u2013 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>align-items<\/code>. \u041e\u043d\u043e \u0437\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u0430\u043a \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438.<\/p>\n<p>\u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0430\u0437\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u0430\u0436\u0434\u043e\u043c item.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"item item-1\">     item 1     &lt;div>text&lt;\/div>     &lt;div>text&lt;\/div> &lt;\/div> &lt;div class=\"item item-2\">     item 2     &lt;div>text&lt;\/div> &lt;\/div> &lt;div class=\"item item-3\">     item 3 &lt;\/div><\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-items: stretch<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u043b\u0438\u0441\u044c \u043d\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>align-items<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>stretch<\/code> \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-start<\/code> \u043f\u0440\u0438\u0436\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0432\u0435\u0440\u0445\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: flex-start; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-items: flex-start<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-end<\/code>, \u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0436\u043c\u0443\u0442\u0441\u044f \u043a\u043d\u0438\u0437\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: flex-end; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-items: flex-end<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>center<\/code> \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: center; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-items: center<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>baseline<\/code> \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 <code>flex-start<\/code>.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: baseline; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-items: baseline<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0440\u0430\u0437\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u044a\u0435\u0437\u0436\u0430\u044e\u0442. <\/p>\n<pre><code class=\"css\">.item-1 {   font-size: 32px; }  .item-2 {   font-size: 64px; }  .item-3 {   font-size: 16px; } <\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-items: baseline (\u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0430)<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>baseline<\/code> \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043d\u0438\u0436\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u0430, \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 baseline. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0436\u0435\u043b\u0442\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435.<\/p>\n<h3>gap<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u2013 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>gap<\/code>. \u041e\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>gap<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>16px<\/code>.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap;   gap: 16px; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>gap: 16px<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 16 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. <\/p>\n<p>\u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u2013 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c 2 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0440\u044f\u0434. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c <code>16px<\/code> \u0438 <code>32px<\/code>. \u0418 \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/p>\n<pre><code class=\"css\">.container {   display: flex;   flex-wrap: wrap;   gap: 16px 32px; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>gap: 16px 32px<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043a\u0430 \u044d\u0442\u043e \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u0432\u0441\u0435 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0441\u0430\u043c\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0436\u0430\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<h3>order<\/h3>\n<p>\u0418 \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>order<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u0435\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u043e\u0438\u0442 <code>order: 0<\/code> \u0438 \u0442\u043e\u0433\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u044b \u0432 HTML. <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order<\/code> \u043d\u0430 1 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 . <\/p>\n<pre><code class=\"css\">.item-2 {   order: 1; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>&#171;order: 1&#187; \u0443 &#171;item 2&#187;<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0438\u0434\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0447\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0432 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0435\u0446. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order: 0<\/code>, \u0443 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order: 0<\/code>, \u0430 \u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>order: 1<\/code> \u0438 \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0435\u0446. <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c <code>order<\/code> \u0443 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n<pre><code class=\"css\">.item-1 {   order: 5; }  .item-2 {   order: 3; }  .item-3 {   order: 1; } <\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 order<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, <code>order<\/code> \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0434\u0442\u0438 \u043f\u043e\u0434\u0440\u044f\u0434 1 \u043a \u043e\u0434\u043d\u043e\u043c\u0443. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 CSS \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u043a\u0430\u043a\u043e\u0435 \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n<h3>align-self<\/h3>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>align-self<\/code> \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <code>align-items<\/code> \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u0435\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435. <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043c <code>align-items: center<\/code> \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>align-self<\/code> \u0443\u043a\u0430\u0436\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-start<\/code>. <\/p>\n<pre><code class=\"css\">.container {   display: flex;   align-items: center; }  .item-2 {   align-self: flex-start; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-self: flex-start<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043b \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435, \u0445\u043e\u0442\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e-\u0446\u0435\u043d\u0442\u0440\u0443. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 <code>flex-end<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0441\u043a\u043e\u0447\u0438\u0442 \u0432\u043d\u0438\u0437.<\/p>\n<pre><code class=\"css\">.item-2 {   align-self: flex-end; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>align-self: flex-end<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e-\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>align-self<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>align-items<\/code> \u0443 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u2013 <code>flex-start<\/code>, <code>flex-end<\/code>, <code>center<\/code>, <code>baseline<\/code>, <code>stretch<\/code>.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0435\u0440\u0438\u0438 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0418\u043c\u0435\u043d\u043d\u043e \u0441 \u043d\u0438\u043c\u0438 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0443 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432.<\/p>\n<h3>flex-grow<\/h3>\n<p>\u0418 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>flex-grow<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u2013 \u044d\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043d\u0435\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 flex-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u043e \u0436\u0435\u043b\u0442\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u043d\u0438\u0436\u0435.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-grow<\/code> \u2013 \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0440\u0443\u0433 \u043a \u0434\u0440\u0443\u0433\u0443.<\/p>\n<p>\u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>flex-grow<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 0. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u044f\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0436\u0435\u043c 1, \u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u044d\u0442\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e.<\/p>\n<pre><code class=\"css\">.item {   flex-grow: 1; }<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>flex-grow: 1<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>flex-grow<\/code> \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-379756","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/379756","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=379756"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/379756\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=379756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=379756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=379756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}