CSS3 box learning_html/css_WEB-ITnose

The box style provided by CSS3 can realize the flexible layout of the elements inside the box. We do not need to use float or display: inline to arrange the block elements horizontally (box-orient can do it), or Calculate the width or percentage of each block to achieve equal distribution (box-flex can do this). So, use it boldly, girl. Setting display:box on the parent element allows you to layout the internal block-level child elements. At this time, the internal elements are arranged according to the arrangement of inline elements, but the width and height can be set. Use the following styles for the parent box:

1.box-orient

specifies the arrangement of internal child elements, specifically

vertical

horizontal

inline-axis

block-axis

2.box-align

specifies the vertical arrangement of internal sub-elements:

center: Vertically centered in the parent box

start: Arrange from the top of the parent element

end: Align the bottom of the parent element

stretch: Stretch vertically Fill the entire parent element

baseline

3.box-pack

Alignment in the horizontal direction
start: left alignment
center: implement child The element is centered in the horizontal direction
justify: aligned at both ends
end: right aligned

Note: The explanations of box-align and box-pack alignment are related to the setting of box-orient.

4.box-direction

The arrangement order of sub-boxes.

5.box-sizing

What parts of the box are included in the width setting:

content-box: width=content area

border-box :width=content area padding border

6.box-flex

This attribute should be set in the child element to allocate the remaining width and height of the parent element (when set to vertical arrangement ), setting this attribute must be set by the parent element to have display: box.
Understanding of remaining width:

Parent container width - child container fixed width (priority)/child container content width - child container margin&border&padding

Copyright statement: This article This is an original article by the blogger and may not be reproduced without the blogger's permission.