8.1.6 Elastic Box Model

Elastic box Model

Note that the parent element must be display:box or display:inline-box when using the elastic box model

box-orient defining the layout direction of the box model (written on the parent element)

　　Horizontal horizontal display (default)

　　Vertical vertical Direction

box-direction element arrangement order (written on parent element)

Normal sequence (default)

Reverse reverse Order

Box-ordinal-group setting the exact location of an element

Box-flex defines the elastic space of a box

Dimension of child element = size of Box * child element's Box-flex attribute value/Box-flex property value of all child elements and

Box-pack Management of the box's rich space (horizontal direction)

Start all child elements shown on the left side of the box, rich space on the right

　　End All child elements shown on the right side of the box, rich space on the left

　　 Center All child elements centered

　　Justify surplus space between child elements

box-align Managing the position of the element vertically (vertical direction)

　　start All child elements at the top of the data

　　End All child elements at the end of the data

　　 Center All child elements centered

Q: How do unknown block elements with wide height center horizontally vertically in the screen? (See the code below)

Css

*{padding:0;margin:0; }html, Body{Height:100%; }. Box{Height:100%;font-size:20px;Color:#fff;Display:-webkit-box;-webkit-box-pack:Center;-webkit-box-align:Center; }. Box Div{width:100px;Height:100px;background:Red;Border:1px solid #fff; }

Html

<Divclass= "box">    <Div>1</Div>    <Div>2</Div>    <Div>3</Div></Div>

8.1.6 Elastic Box Model