Chapter 15. CSS: Layout – Flex Box

Margin: auto with Flex Box

Tag:

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-left
margin-right
margin-top
margin-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.

chapter15.html

<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.

practice.css

.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: auto works with Flex Box.

You can also check the sample result here (Demo Site ).

demo code