{"id":1009,"date":"2016-06-07T11:13:29","date_gmt":"2016-06-07T08:13:29","guid":{"rendered":"http:\/\/starhack.ru\/?p=1009"},"modified":"2016-06-07T11:14:12","modified_gmt":"2016-06-07T08:14:12","slug":"ispolzuete-li-vy-flexbox-chast-2-ya","status":"publish","type":"post","link":"http:\/\/starhack.ru\/ispolzuete-li-vy-flexbox-chast-2-ya\/","title":{"rendered":"??\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043b\u0438 \u0432\u044b Flexbox? \u0427\u0430\u0441\u0442\u044c 2-\u044f"},"content":{"rendered":"<p>\u0412 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f flexbox.<br \/>\n\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c SASS, \u0442\u043e \u044f \u0434\u043b\u044f \u043f\u0443\u0449\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 flexbox.<br \/>\n\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<pre><code>$flex-properties: (\r\n    <strong>justify-content<\/strong>: (flex-start flex-end center space-between space-around),\r\n    <strong>align-items<\/strong>: (flex-start flex-end center baseline stretch),\r\n    <strong>align-content<\/strong>: (flex-start flex-end center space-between space-around stretch)\r\n);\r\n<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<pre><code>@each $key, $properties in $flex-properties {\r\n    @each $property in $properties {\r\n        [#{$key}=\"#{$property}\"] {\r\n            #{$key}: #{$property};\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>?? \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 CSS:<br \/>\n<!--more--><\/p>\n<pre><code>[justify-content=\"flex-start\"] {\r\n  justify-content: flex-start; }\r\n\r\n[justify-content=\"flex-end\"] {\r\n  justify-content: flex-end; }\r\n\r\n[justify-content=\"center\"] {\r\n  justify-content: center; }\r\n\r\n[justify-content=\"space-between\"] {\r\n  justify-content: space-between; }\r\n\r\n[justify-content=\"space-around\"] {\r\n  justify-content: space-around; }\r\n\r\n[align-items=\"flex-start\"] {\r\n  align-items: flex-start; }\r\n\r\n[align-items=\"flex-end\"] {\r\n  align-items: flex-end; }\r\n\r\n[align-items=\"center\"] {\r\n  align-items: center; }\r\n\r\n[align-items=\"baseline\"] {\r\n  align-items: baseline; }\r\n\r\n[align-items=\"stretch\"] {\r\n  align-items: stretch; }\r\n\r\n[align-content=\"flex-start\"] {\r\n  align-content: flex-start; }\r\n\r\n[align-content=\"flex-end\"] {\r\n  align-content: flex-end; }\r\n\r\n[align-content=\"center\"] {\r\n  align-content: center; }\r\n\r\n[align-content=\"space-between\"] {\r\n  align-content: space-between; }\r\n\r\n[align-content=\"space-around\"] {\r\n  align-content: space-around; }\r\n\r\n[align-content=\"stretch\"] {\r\n  align-content: stretch; }\r\n<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u044d\u0442\u0438\u043c \u0432\u0441\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0434\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a:<\/p>\n<pre>&lt;div mo-layout justify-content=\"center\" align-items=\"center\" align-content=\"center\"&gt;\r\n &lt;div&gt;11111111&lt;\/div&gt;\r\n &lt;div&gt;2 &lt;br \/&gt; 2&lt;\/div&gt;\r\n &lt;div&gt;3 &lt;br \/&gt; 3 &lt;br \/&gt; 3&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>?? \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p data-height=\"265\" data-theme-id=\"light\" data-slug-hash=\"PzPpgd\" data-default-tab=\"result\" data-user=\"oknechirik\" data-embed-version=\"2\" data-preview=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/oknechirik\/pen\/PzPpgd\/\">PzPpgd<\/a> by Sergey Kirichenko (<a href=\"http:\/\/codepen.io\/oknechirik\">@oknechirik<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f flexbox. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c SASS, \u0442\u043e \u044f \u0434\u043b\u044f \u043f\u0443\u0449\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 flexbox. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: $flex-properties: ( justify-content: (flex-start flex-end center space-between space-around), align-items: (flex-start flex-end center baseline stretch), align-content: (flex-start flex-end center &hellip; <a href=\"http:\/\/starhack.ru\/ispolzuete-li-vy-flexbox-chast-2-ya\/\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435 <span class=\"screen-reader-text\">??\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043b\u0438 \u0432\u044b Flexbox? \u0427\u0430\u0441\u0442\u044c 2-\u044f<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,13,63],"tags":[83,99],"_links":{"self":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts\/1009"}],"collection":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/comments?post=1009"}],"version-history":[{"count":9,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts\/1009\/revisions"}],"predecessor-version":[{"id":1018,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts\/1009\/revisions\/1018"}],"wp:attachment":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/media?parent=1009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/categories?post=1009"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/tags?post=1009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}