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 position
If you set the auto keyword for both margin-left and margin-right, the child element is placed in the center.
Right position
If you set the auto keyword for margin-left, the child element is placed at the right edge.
Vertical positions
Top position
If you don't specify a vertical margin, the child element is placed at the top.
Vertical center position
If you set an auto keyword for both margin-top and margin-bottom, the child element is placed in the center vertically.
Bottom position
If you set the auto keyword for margin-top, the child element is placed at the bottom.
Practice
Objective:
Check how margin: auto works with Flex Box
1. Update the body section of the HTML file
Add the code below in the <body> section of the chapter15.html file. We are adding new classes for the flex container and flex items to set new styles.
<h2>margin: auto with Flex Box</h2>
<div style="display: flex;">
<div>
<h3>1</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto"></div>
</div>
</div>
<div>
<h3>2</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-left: auto; margin-right: auto;"></div>
</div>
</div>
<div>
<h3>3</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-left: auto"></div>
</div>
</div>
</div>
<div style="display: flex;">
<div>
<h3>4</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-top: auto; margin-bottom: auto"></div>
</div>
</div>
<div>
<h3>5</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin: auto"></div>
</div>
</div>
<div>
<h3>6</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-left: auto; margin-top: auto; margin-bottom: auto;"></div>
</div>
</div>
</div>
<div style="display: flex;">
<div>
<h3>7</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-top: auto"></div>
</div>
</div>
<div>
<h3>8</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-top: auto; margin-left: auto; margin-right: auto;"></div>
</div>
</div>
<div>
<h3>9</h3>
<div class="flex-container-for-margin-auto">
<div class="flex-item-margin-auto" style="margin-top: auto; margin-left: auto;"></div>
</div>
</div>
</div>
<ol>
<li>Original Position</li>
<li>margin-left & right: auto</li>
<li>margin-left: auto</li>
<li>margin-top & bottom: auto</li>
<li>margin: auto</li>
<li>margin-left, top & bottom: auto</li>
<li>margin-top: auto</li>
<li>margin-top, left & right: auto</li>
<li>margin-top & left: auto</li>
</ol>
<hr>
2. Update the CSS file
Open the practice.css file and add new code for adding styles to the flex container and flex items.
.flex-container-for-margin-auto{
border: solid #23ACBB;
display: flex;
height: 100px;
width: 100px;
margin: 10px;
}
.flex-item-margin-auto{
background-color: #1E838A;
width: 50px;
height: 50px;
}
3. Check the result with a browser
- Open chapter15.html with a browser.
- You can see how
margin: autoworks with Flex Box.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.