CSS3 Flexbox Elastic Layout Example

Common Example 1. Center Alignment

<! DOCTYPE html>"Utf-8"> <style type="Text/css">. Flex-container{padding:0; Margin:0; List-Style:none; Display:-webkit-box; Display:-moz-box; Display:-ms-Flexbox; Display:-webkit-Flex;            Display:flex; -webkit-flex-Flow:row nowrap; Justify-content:space-around; }. Flex-item{Background:tomato;            padding:5px;            width:200px;            height:150px; Margin-top:10px; Line-height:150px;            Color:white; Font-Weight:bold; Font-Size:3em; Text-Align:center}</style>class="Flex-container"> <liclass="Flex-item">1</li> <liclass="Flex-item">2</li> <liclass="Flex-item">3</li> <liclass="Flex-item">4</li> <liclass="Flex-item">5</li> <liclass="Flex-item">6</li></ul></body>
Effect:
2. Adaptive navigation 
<!            DOCTYPE html>
　　Effect:
/* Large */.navigation {  display:flex;  Flex-flow:row Wrap;  /* This aligns items to the end line on Main-axis */  justify-content:flex-end;} /* Medium Screens */@media all and (max-width:800px) {  . Navigation {/* When on    Medium sized screens, we center I T by evenly distributing empty space around items */    justify-content:space-around;  }} /* Small Screens */@media all and (max-width:500px) {  . Navigation {/    * on Small screens, we is no longer using Row direction But column */    flex-direction:column;  }}
3. Common 3 column Mobile priority layout

 
  

  
   
 
    
Set child elements from left to right, beyond line breaks (Flex-flow:row wrap;).
 
    
By default, all child elements have a scale of 1 (flex-grow:1) and a scaling ratio of 100% (flex-basis:100%).
 
    
Greater than 800px,. Main expands to 2. The scaling value is 0 (flex-basis:0px), and the sidebar aside-1 is arranged in the first position, main in the second position, and aside-2 in the third position.
 
    
Greater than 600: The aside element has an expansion ratio of 1 (flex-grow:1), and the scaling ratio is auto (Flex-basis:auto).
 
   
 
  
<!            DOCTYPE html>@media all and (min-width:800px) {. Main{flex:2 0px}. aside-1{order:1}. Main{order:2}. Asid    E-2{order:3}. Footer{order:4}} </style>
　　Effect:
Align vertically with center
<! DOCTYPE html>"Utf-8"> <style type="Text/css">copyright belongs to the author.        Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source. Link: http://caibaojian.com/flexbox-example.htmlSource: http://caibaojian.comBody {display:-webkit-Flex;                                               Display:flex; Flex-Flow:column; -webkit-align-Items:center; Align-Items:center; -webkit-justify-Content:center; Justify-Content:center; Width: -%; Height: -%;                                           Background:lightgrey; }. Content {/*also making content into a flex box so we can also vertically center its content*/Display:-webkit-Flex;            Display:flex; -webkit-flex-Flow:column; Flex-Flow:column; -webkit-justify-Content:center; Justify-Content:center; Text-Align:center;            width:250px;            height:250px;            padding:7px;        Background:yellow; }    </style>class="content"> <p>it isExtremely difficult to vertically align contentusingTraditional CSS without knowing exactlywhereYou want the item to appear. </p> </div> </body></form></body>
Typical page layouts for blog posts
<! DOCTYPE html>"Utf-8"> <style type="Text/css">. Post {Display:flex; Flex-Flow:column Wrap; }. Post-Meta {Display:flex; Flex-Flow:row Wrap; Order:1; }. Post-Body {order:3; }. Post-Comments {order:4; }. Comments-Count {margin-Left:auto; }. Post-Image {order:2; Align-Self:center; }    </style>class="Post">  isMy first blog postclass="Post-meta"> <divclass="author">alex cheng</div> <divclass="datetime"> the- -- Geneva Ten:TenAm</div> <divclass="Comments-count">2Comments</div> </div> <divclass="Post-body">My First blog post. </div> <divclass="post-image"> "http://placehold.it/500x200&text=1"> </div> <divclass="post-comments"> class="author">bob</div><div>this isA good post.</div></li> <li><divclass="Autho">david</div><div>good post.</div></li> </ul> </div></div></body& Gt;
2017-08-23 23:25:48
CSS3 Flexbox Elastic Layout Example