CSS3 Flow-through layout

CSS3 Layout Method:

• Not recommended float , sometimes when using floating, for the adaptive flow of the layout, not competent. Recommended for use with CSS3 display:webkit-box .

HTML code to use

 <div class= "warp" > <div class= "One" > </div> <div class= "one" >&L T;/div> <div class= "three" ></div> </div>  

• Box-flex Property
  • Box-flex mainly allows sub-containers to be divided for the width of the parent container according to certain rules
  • One of the most important features is that if there is a fixed width in the child element, the other is not set width, the width of the child element is subtracted from the parent element, and then the scale is divided.

CSS Code

    .warp{display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}     .one{height:80px;width:80px;background:#FFA600;}     .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}     .three{height:80px;width:80px;background:#028002;}

• Box-orient Property

  horizontal or vertical ;

  • horizontal box-orient:horizontal

    CSS code

    .warp{-webkit-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px ; border:1px solid #333;} . One{height:80px;width:80px;background: #FFA600;}. two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1; Background: #7F0081;} . Three{height:80px;width:80px;background: #028002;}  

  • Vertical arrangement Box-orient:vertical

    CSS Code

    .warp{-webkit-box-orient: vertical;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}

• Box-align Property

  box-align represents the vertical alignment of the face container in the parent container, and the optional parameters are as follows: Start | end | center | baseline | Stretch

  • top align start

    css code

    .warp{-webkit-box-align:start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} . One{height:80px;width:80px;background: #FFA600;}. two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1; Background: #7F0081;} . Three{height:80px;width:80px;background: #028002;}  

  • vertical arrange end

    CSS code

    .warp{-webkit-box-align:end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border : 1px solid #333;} . One{height:80px;width:80px;background: #FFA600;}. two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1; Background: #7F0081;} . Three{height:80px;width:80px;background: #028002;}  

• Vertical Alignment Center

  CSS Code

    .warp{-webkit-box-align: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{height:80px;width:80px;background:#FFA600;}   .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{height:80px;width:80px;background:#028002;}

• Arranging STRETCHCSS code vertically

    .warp{-webkit-box-align: stretch;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{width:80px;background:#FFA600;}   .two{-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{width:80px;background:#028002;}

  However, it is important to note that if the height of the child element is already setheight:20pxThere is no automatic stretching.

• The
• Box-pack property

  box-pack represents the horizontal alignment of the face container in the parent container, and the optional parameters are as follows: Start | end | Center | Justify

  • horizontal left align Startcss code

    .warp{-webkit-box-pack:start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border : 1px solid #333;} . One{height:80px;width:80px;background: #FFA600;}. two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1; Background: #7F0081;}
     . Three{height:80px;width:80px;background: #028002;}  

• box-pack indicates horizontal right-aligned end

  CSS code

   warp{-webkit-box-pack:end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border   : 1px solid #333;}   . One{height:80px;width:80px;background: #FFA600;}   . Two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1;background: #7F0081;} . Three{height:80px;width:80px;background: #028002;}  

• box-pack for horizontal center alignment center

  CSS Code

   warp{-webkit-box-pack:center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px;   border:1px solid #333;}   . One{height:80px;width:80px;background: #FFA600;}   . Two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1;background: #7F0081;} . Three{height:80px;width:80px;background: #028002;}  

• warp{-webkit-box-pack:justify;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} . One{height:80px;width:80px;background: #FFA600;} . Two{height:100px;-webkit-box-flex:1;-o-box-flex:1;box-flex:1;background: #7F0081;} . Three{height:80px;width:80px;background: #028002;}