margin: auto with Flex Box
As explained in Chapter 10, when you use auto as a keyword of margin setting, it tries to maximize margins as much as possible. Using this aspect, you can utilize the property value to adjust the layout effectively. In the regular situation, margin: auto works only horizontally, but when you use Flex Box, margin: auto works vertically as well.
Using the characteristics of margin: auto, you can place a child element in the center of each side, at the edge of each side, or on the corner of the parent element.
When specifying margins, you can use a combination of the side-specific margin properties:
margin-leftmargin-rightmargin-topmargin-bottom
Or you can specify multiple values in the margin property. In this section, we'll explain the side-specific margin property to make it easy to understand.
The position of a child element is determined by a combination of the horizontal position and the vertical position. We'll explain how to set horizontal positions and vertical positions below.
Horizontal positions
Left edge position (default)
If you don't specify a horizontal margin, the child element is placed at the left edge.
Horizontal center pos
Subscribe now for
uninterrupted access.