"Go" CSS3 layout properties Full Contact

1. "Elastic box Model Flexbox", the biggest feature is the ability to dynamically modify the width and height of the child elements to meet the different sizes of the appropriate layout of the screen.

Flex-direction:row | row-reverse | column | Column-reverse/*set the spindle orientation to determine the arrangement of the elastic sub-elements*/Flex-wrap:nowrap | wrap | warp-reverse/*set whether the flex element wraps when it is outside the elastic container range*/flex-flow: [flex-direction]| | [Flex-wrap]/*Composite Properties (Flex-direction and Flex-wrap), setting the arrangement of elastic sub-elements*/Justify-content:flex-start | flex-end | center | space-between | Space-around/*to set the alignment of the elastic child elements on the spindle*/Align-items:flex-start|flex-end|center|baseline|stretch/*to set the alignment on the side axis of an elastic child element*/Align-content:flex-start|flex-end|center|space-between|space-around/*to set the alignment on the side axis of an elastic child when the side axis is blank and has multiple rows*/order:<integer>/*sets the order of the elastic child elements, which are small in front and can be negative values. */flex-grow:<number>/*set the extended ratio of elastic child elements, not allowed to negative values, default 0*/flex-shrink:<number>/*sets the shrinkage ratio of the elastic child elements, not allowed as negative values, default 1*/Flex-basis:<length>|<percentage>|auto/*sets the Flex datum value of the elastic child element, not allowed as a negative value*/

code example: Implementing a menu item with a flexible box model

<ul class= "menu" > <li><a href= "#" >HTML</a></li> <li><a href= "#" >CSS&L T;/a></li> <li><a href= "#" >JavaScript</a></li> <li><a href= "#" >sass& Lt;/a></li> <li><a href= "#" >Ruby</a></li> <li><a href= "#" >mongo</a ></li></ul>/** Mobile First principle, priority to realize the layout under the small screen * use color, #39ADD1 #3079AB #982551 #E15258 #CC6699 #52AC43 **/. Menu{List-style-type:None;padding:0;margin:0;Display:Flex;/*Enable Elastic box*/Flex-flow:Row Wrap; }. Menu Li{Height:40px;text-align:Center;Line-height:40px;Flex:1 1 100%;/*Initial Layout Method*/}. Menu Li:nth-child (1){Background-color:#39ADD1; }. Menu Li:nth-child (2){Background-color:#3079AB; }. Menu Li:nth-child (3){Background-color:#982551; }. Menu Li:nth-child (4){Background-color:#E15258; }. Menu Li:nth-child (5){Background-color:#CC6699; }. Menu Li:nth-child (6){Background-color:#52AC43; }. Menu Li a{Color:#fff;text-decoration:None; }@media (min-width:480px){. menu Li {Flex:1 1 50%; }} @media (min-width:768px){. menu {Flex-flow:Row nowrap; } }

View Code

2. "Multi-column attribute detailed"

code example: Picture Waterfall Flow Implementation

/*The realization of picture waterfall flow*/<!--Emmet shorthand htmlh1{Picture Waterfall Stream}+ul.picc>li*18>img[src= "Img/$.jpg"]-->/*The realization of picture waterfall flow*/H1{width:100%;Height:50px;margin:0;text-align:Center;Line-height:50px;Background-color:#fff;Box-shadow:0 2px 6px 0 raba (0,0,0,.5);position:fixed; Left:0;Top:0;}. PicC{width:90%;margin:50px Auto;-webkit-column-count:4;-moz-column-count:4;Column-count:4;-webkit-column-gap:20px;-moz-column-gap:20px;Column-gap:20px;List-style-type:None;}. PicC Li{Margin-top:10px;}

View Code

3. "Media Query Parsing"

Mode 1:

<link rel= "Stylesheet" media= "(max-width:800px)" href= "Example.css"/>

Mode 2:

@media (max-width:600px) {    . Facet_sidebar    {        display: none;    } }

4. "Responsive Form Project"

5. "Responsive Picture Project"

Transferred from the Geek Academy.

"Go" CSS3 layout properties Full Contact