Flex Box Model Detailed parsing

Flex Box Model Detailed parsing

Mobile page layout, using box model layout, the effect is very good

/* ============================================================   flex: Define layout for box model     FLEX-V: Box model Vertical Layout    flex-1: child elements occupy the remaining space    flex-align-center: child elements vertically centered     flex-pack-center: Child elements are centered horizontally    flex-pack-justify: child elements justify     compatibility:ios  4+, android 2.3+, winphone8+   ============================================================  */.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}. Flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction: Column;}. Flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}. Flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center ;}. Flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content: Center;}. Flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:spAce-between;-ms-flex-pack:justify;justify-content:space-between;}   This is generally compatible with the advanced browser kernel. Refer to the white Tree of the great God article, and summed up to get, thank Gondor. White Tree original link:http://www.cnblogs.com/peunzhang/p/3407453.html  Download demo reference link: http://files.cnblogs.com/files/leshao/ Flex%e7%9b%92%e6%a8%a1%e5%9e%8b.rar

Flex Box Model detailed parsing