{"id":18770,"date":"2016-05-18T14:24:27","date_gmt":"2016-05-18T10:54:27","guid":{"rendered":"http:\/\/www.xn--mgbguh09aqiwi.com\/?p=18770"},"modified":"2016-05-18T14:27:24","modified_gmt":"2016-05-18T10:57:24","slug":"%d8%b3%d8%a7%d8%ae%d8%aa-%d9%be%d9%86%d9%84-%d8%a7%d8%b1%db%8c%d8%a8-flexbox-%d8%a8%d8%a7-%d8%b5%d9%88%d8%b1%d8%aa-responsive","status":"publish","type":"post","link":"https:\/\/www.xn--mgbguh09aqiwi.com\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%be%d9%86%d9%84-%d8%a7%d8%b1%db%8c%d8%a8-flexbox-%d8%a8%d8%a7-%d8%b5%d9%88%d8%b1%d8%aa-responsive.html","title":{"rendered":"\u0633\u0627\u062e\u062a \u067e\u0646\u0644 \u0627\u0631\u06cc\u0628 FlexBox \u0628\u0627 \u0635\u0648\u0631\u062a Responsive"},"content":{"rendered":"

\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0632 \u0633\u0627\u06cc\u062a \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645 , \u0642\u0635\u062f \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u067e\u0646\u0644 \u0627\u0631\u06cc\u0628 \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0628\u0627 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062c\u062f\u06cc\u062f Flex \u0631\u0627 \u062f\u0627\u0631\u0645 .<\/p>\n

\u0627\u06cc\u0646 \u0628\u0646\u0644 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u06cc \u06a9\u0648\u0626\u0631\u06cc \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u062a\u0645\u0627\u0645 \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a Html5 \u0648 Css3 \u0645\u06cc\u0628\u0627\u0634\u062f .<\/p>\n

\u0636\u0645\u0646\u0627 \u0627\u06cc\u0646 \u067e\u0646\u0644 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644\u0627 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0645\u06cc\u0628\u0627\u0634\u062f .<\/p>\n

\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0622\u0645\u0648\u0632\u0634 , \u062f\u0645\u0648\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0641\u0631\u0645\u0627\u06cc\u06cc\u062f .<\/p>\n

<\/p>\n

$\"\u0633\u0627\u062e\u062a$ <\/a><\/p>\n

\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0641\u0642\u0637 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0627\u0628\u062a\u062f\u0627 \u06a9\u062f html \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0628\u06cc\u0646 \u062a\u06af body \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f .<\/p>\n

<main class=\"vms-flexbox\">\r\n  <section>\r\n    <article class=\"vms-flexbox\">\r\n      <h2>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645<\/h2>\r\n      <p>\u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc \u0635\u062f\u0631<\/p>\r\n    <\/article>\r\n  <\/section>\r\n  <section>\r\n    <article class=\"vms-flexbox\">\r\n      <h2>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645<\/h2>\r\n      <p>\u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc \u0635\u062f\u0631<\/p>\r\n    <\/article>\r\n  <\/section>\r\n  <section>\r\n    <article class=\"vms-flexbox\">\r\n\t  <h2>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645<\/h2>\r\n      <p>\u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc \u0635\u062f\u0631<\/p>\r\n    <\/article>\r\n  <\/section>\r\n  <section>\r\n    <article class=\"vms-flexbox\">\r\n      <h2>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645<\/h2>\r\n      <p>\u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc \u0635\u062f\u0631<\/p>\r\n    <\/article>\r\n  <\/section>\r\n  <section>\r\n    <article class=\"vms-flexbox\">\r\n      <h2>\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645<\/h2>\r\n      <p>\u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc \u0635\u062f\u0631<\/p>\r\n    <\/article>\r\n  <\/section>\r\n<\/main><\/pre>\n\u062d\u0627\u0644 \u06a9\u062f \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 css \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u0646\u0645\u0627\u06cc\u06cc\u062f .<\/p>\n*{\r\n  margin:0;\r\n  padding:0;\r\n}\r\nbody {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  font-size: 13px;\r\n  line-height: 1.4;\r\n  background-color: black;\r\n  font-family:tahoma;\r\n}\r\nmain.vms-flexbox *{\r\n\tbox-sizing:border-box;\t\r\n}\r\nmain.vms-flexbox {\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n  -webkit-flex-direction: column;\r\n      -ms-flex-direction: column;\r\n          flex-direction: column;\r\n  width: 130%;\r\n  margin-left: -15%;\r\n  -webkit-transform: translate3d(0, 0, 0);\r\n          transform: translate3d(0, 0, 0);\r\n}\r\n@media (min-width: 630px) {\r\n  main.vms-flexbox {\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n  }\r\n}\r\nmain.vms-flexbox section:not(:first-child):not(:last-child):hover {\r\n  -webkit-box-flex: 2;\r\n  -webkit-flex: 2;\r\n      -ms-flex: 2;\r\n          flex: 2;\r\n}\r\nmain.vms-flexbox section:not(:first-child):not(:last-child):hover:after {\r\n  opacity: .8;\r\n}\r\nmain.vms-flexbox section:not(:first-child):not(:last-child):hover article.vms-flexbox {\r\n  opacity: 1;\r\n  -webkit-transform: translateY(0);\r\n          transform: translateY(0);\r\n  -webkit-transition: opacity .2s .2s, -webkit-transform .2s .2s;\r\n  transition: opacity .2s .2s, -webkit-transform .2s .2s;\r\n  transition: opacity .2s .2s, transform .2s .2s;\r\n  transition: opacity .2s .2s, transform .2s .2s, -webkit-transform .2s .2s;\r\n}\r\n@media (min-width: 630px) {\r\n  main.vms-flexbox section:not(:first-child):not(:last-child):hover article.vms-flexbox {\r\n    -webkit-transform: translateY(0) skewX(-15deg);\r\n            transform: translateY(0) skewX(-15deg);\r\n  }\r\n}\r\n\r\nmain.vms-flexbox section {\r\n  -webkit-box-flex: 1;\r\n  -webkit-flex: 1;\r\n      -ms-flex: 1;\r\n          flex: 1;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 20vh;\r\n  overflow: hidden;\r\n  z-index: 1;\r\n  -webkit-transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s;\r\n  transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s;\r\n  transition: flex-grow .2s, opacity .2s;\r\n  transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s, -webkit-flex-grow .2s, -ms-flex-positive .2s;\r\n}\r\nmain.vms-flexbox section:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-position: center;\r\n  background-size: cover;\r\n  -webkit-transition: width .2s, -webkit-transform .2s;\r\n  transition: width .2s, -webkit-transform .2s;\r\n  transition: transform .2s, width .2s;\r\n  transition: transform .2s, width .2s, -webkit-transform .2s;\r\n}\r\nmain.vms-flexbox section:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: black;\r\n  opacity: 0;\r\n  -webkit-transition: opacity .2s;\r\n  transition: opacity .2s;\r\n}\r\n@media (min-width: 630px) {\r\n  main.vms-flexbox section {\r\n    width: 20%;\r\n    height: 100vh;\r\n    margin-right: -1px;\r\n    -webkit-transform: skewX(15deg) translateZ(0);\r\n            transform: skewX(15deg) translateZ(0);\r\n  }\r\n  main.vms-flexbox section:before {\r\n    left: -100%;\r\n    width: 400%;\r\n    -webkit-transform: skewX(-15deg);\r\n            transform: skewX(-15deg);\r\n  }\r\n}\r\nmain.vms-flexbox section:nth-child(1):before {\r\n  background-color: #e60000;\r\n  background-image: url(images\/bg-section--1.jpg);\r\n}\r\n.hide-images main.vms-flexbox section:nth-child(1):before {\r\n  background-image: none;\r\n}\r\nmain.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {\r\n  background-color: #660000;\r\n}\r\nmain.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {\r\n  opacity: .5;\r\n}\r\nmain.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {\r\n  display: none;\r\n}\r\nmain.vms-flexbox section:nth-child(2):before {\r\n  background-color: #cc0000;\r\n  background-image: url(images\/bg-section--2.jpg);\r\n}\r\n.hide-images main.vms-flexbox section:nth-child(2):before {\r\n  background-image: none;\r\n}\r\nmain.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {\r\n  background-color: #660000;\r\n}\r\nmain.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {\r\n  opacity: .5;\r\n}\r\nmain.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {\r\n  display: none;\r\n}\r\nmain.vms-flexbox section:nth-child(3):before {\r\n  background-color: #b30000;\r\n  background-image: url(images\/bg-section--3.jpg);\r\n}\r\n.hide-images main.vms-flexbox section:nth-child(3):before {\r\n  background-image: none;\r\n}\r\nmain.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {\r\n  background-color: #660000;\r\n}\r\nmain.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {\r\n  opacity: .5;\r\n}\r\nmain.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {\r\n  display: none;\r\n}\r\nmain.vms-flexbox section:nth-child(4):before {\r\n  background-color: #990000;\r\n  background-image: url(images\/bg-section--4.jpg);\r\n}\r\n.hide-images main.vms-flexbox section:nth-child(4):before {\r\n  background-image: none;\r\n}\r\nmain.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {\r\n  background-color: #660000;\r\n}\r\nmain.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {\r\n  opacity: .5;\r\n}\r\nmain.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {\r\n  display: none;\r\n}\r\nmain.vms-flexbox section:nth-child(5):before {\r\n  background-color: maroon;\r\n  background-image: url(images\/bg-section--5.jpg);\r\n}\r\n.hide-images main.vms-flexbox section:nth-child(5):before {\r\n  background-image: none;\r\n}\r\nmain.vms-flexbox section:first-child:before, main.vms-flexbox section:last-child:before {\r\n  background-color: #660000;\r\n}\r\nmain.vms-flexbox section:first-child:after, main.vms-flexbox section:last-child:after {\r\n  opacity: .5;\r\n}\r\nmain.vms-flexbox section:first-child article.vms-flexbox, main.vms-flexbox section:last-child article.vms-flexbox {\r\n  display: none;\r\n}\r\n\r\narticle.vms-flexbox {\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n  -webkit-flex-direction: column;\r\n      -ms-flex-direction: column;\r\n          flex-direction: column;\r\n  -webkit-box-align: center;\r\n  -webkit-align-items: center;\r\n      -ms-flex-align: center;\r\n          align-items: center;\r\n  -webkit-box-pack: center;\r\n  -webkit-justify-content: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  left: 0;\r\n  margin: auto;\r\n  padding: 24px;\r\n  width: 100%;\r\n  height: 100%;\r\n  text-align: center;\r\n  color: white;\r\n  z-index: 1;\r\n  -webkit-transition: opacity .2s, -webkit-transform .2s;\r\n  transition: opacity .2s, -webkit-transform .2s;\r\n  transition: opacity .2s, transform .2s;\r\n  transition: opacity .2s, transform .2s, -webkit-transform .2s;\r\n}\r\n@media (min-width: 630px) {\r\n  article.vms-flexbox {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(24px) skewX(-15deg);\r\n            transform: translateY(24px) skewX(-15deg);\r\n  }\r\n}<\/pre>\n\u062f\u0645\u0648\u06cc \u0622\u0645\u0627\u062f\u0647 \u067e\u0646\u0644<\/a><\/span><\/p>\n
\u062f\u0627\u0646\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0622\u0645\u0627\u062f\u0647 \u067e\u0646\u0644<\/a><\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0632 \u0633\u0627\u06cc\u062a \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645 , \u0642\u0635\u062f \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u067e\u0646\u0644 \u0627\u0631\u06cc\u0628 \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0628\u0627 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062c\u062f\u06cc\u062f Flex \u0631\u0627 \u062f\u0627\u0631\u0645 . \u0627\u06cc\u0646 \u0628\u0646\u0644 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u06cc \u06a9\u0648\u0626\u0631\u06cc \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u062a\u0645\u0627\u0645 \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a Html5 \u0648 Css3 \u0645\u06cc\u0628\u0627\u0634\u062f . \u0636\u0645\u0646\u0627 \u0627\u06cc\u0646 \u067e\u0646\u0644 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644\u0627 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0645\u06cc\u0628\u0627\u0634\u062f . \u062f\u0631 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[565,16],"tags":[19879,13493,19883,19880,19878,19882,19877,19881,19886,19885,19884],"_links":{"self":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts\/18770"}],"collection":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/comments?post=18770"}],"version-history":[{"count":0,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts\/18770\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/media?parent=18770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/categories?post=18770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/tags?post=18770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}