1. The text is vertically centered in the div
This can be achieved by setting the row height and height to be the same.
2. Flexbox layout
CSS3 Flexible Box (Flexbox or flexbox) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types. A flexible box consists of a flexible container (Flex container and a flexible child element (Flex item). The flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex. The flexible container contains one or more flexible children. element.
Flex child elements are usually displayed on one line within a flex box. By default, each container has only one line. When the elastic container contains n multiple sub-elements, the width set by the sub-elements will be invalid by default.
3. How to use
Set the div component to a flexbox:
1, 2, 3, and 4 in the renderings represent an elastic sub-element respectively. The following figure shows the display preview of different properties:
Nowrap properties:
Wrap property:
Wrap-reverse property:
Reference: rookie tutorial