"CSS" Elastic box model

Elastic box Model Flexbox

Elastic box model is a new layout mode of C3

It is a layout that ensures that elements behave properly when the page needs to accommodate different screen sizes and device types.

The purpose of introducing the flexible box model layout is to provide a more efficient way to arrange, align, and allocate white space for child elements in a container .

Compatibility

IE11

Elastic Box Model Content

The elastic box model consists of an elastic container (Flex container) and an elastic child element (Flex Item)

Convert parent container settings Display:flex to elastic container

Introduce several common methods:

Flex-direction:

row: Horizontal left-to-right arrangement, default

row-reverse: Horizontal right-to-left arrangement (last item in front)

column: vertical arrangement

column-reverse: Reverse Portrait arrangement (last item on top)

Justify-content:

　　Flex-start: start point Alignment (left justified)

　　flex-end: terminating point Alignment (right-aligned)

　　Center: Center Alignment

　　Space-around: Around

　　Space-between: justify on both sides

How to center the box horizontally vertically:

1 Using the Flex box model Display:flex + justify-content:center + align-items:center

    <style>       . box{           width:400px;           height:300px;           Display:flex; Let the box become elastic box model           justify-content:center; center           align-items:center;  Center           background-color:pink;       }               . child{           width:150px;           height:150px;           Background-color:skyblue;       }              </style>
2 using position:absolute + transform:translate
     . box{           width:400px;           height:300px;           position:relative;           Background-color:pink;       }               . child{           width:150px;           height:150px;           Background-color:skyblue;           Position:absolute;            50%;            50%;           Transform:translate (-50%,-50%)       }             </style>
"CSS" Elastic box model