Home > Developer > Web Develop
It is useful to have a self-adapting fluid layout box. There's no full support for Firefox, Opera, or Chrome, but you can use their private properties to define Firefox (-moz-), opera (-o-), Chrome/safari (-webkit-).
Has the following properties: Box-orient the arrangement of child elements (horizontal or vertical) Vertical horizontal Inline-axis Block-axis
Box-flex ratio between child elements
Box-align child element Vertical alignment start End Center baseline stretch
Box-pack child element Horizontal alignment start End Center Justify
Box-direction Normal Reverse
1. Box-orient horizontal and Inline-axis are arranged horizontally vertical and block-axis are arranged vertically
2. Ratio of Box-flex to sub-elements if there is a direct write pixel ratio of 0 to a fixed width
3. Box-align Normal displays reverse reversal order in the usual order
4. box-align start top align End bottom align Center Center align stretch extrude to parent container, etc. high
5. Box-pack start left Align end Right Align Center Center align justify horizontal equal parent container width (Firefox and opera are temporarily unsupported, only Safari, chrome support)
On the code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css">. Box{Display:Box;Display:-webkit-box;Display:-moz-box;Display:-o-box;box-orient:Horizontal;-webkit-box-orient:Horizontal;-moz-box-orient:Horizontal;-o-box-orient:Horizontal;padding:10px;Padding-right:0px;width:100%;Height:300px;background:Green; }. Item{Box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;Height:100%;Margin-right:10px;background:Grey; }. Item:first-of-type{Box-flex:0;-webkit-box-flex:0;-moz-box-flex:0;-o-box-flex:0;width:200px; }. Item:nth-of-type (2){Box-flex:2;-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2; } </style></Head><Body> <Divclass= "box"> <Divclass= "Item">Column1</Div> <Divclass= "Item">Column2</Div> <Divclass= "Item">Column3</Div> </Div></Body>
CSS3 Display:box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
