How to center the div in the flexbox, or how to simplify the center-right layout?

Question

This is a common question. But I can not find a glossary to describe it. It's just a pagination component, the pages in the center of the row, and the total pages in the right of the row.

To center the pages component, with code:

<div style="display: flex; justify-content: center;position: relative">
    <div style="flex: 1 1 0%;"></div>
    <div>
        <button>&lt;</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>&gt;</button>
    </div>
    <div style="flex: 1 1 0%;"></div>

    <div style="position: absolute; right: 0">
        <span> total pages: 5</span>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>

</div>

It's working correctly now. But it looks verbosely. I am not familiar with CSS. Hope to get your advice, thanks.

Answer 1

You can make it more simple without the empty divs.
In css-tricks there is a really good guie about Flexbox

.flex{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.items-center{
  align-items: center;
}
.justify-end{
  justify-content: flex-end;
}

<div class="flex">
        <div class="flex justify-end items-center">
            <button>&lt;</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>&gt;</button>
        </div>
        <div class="flex justify-end items-center">
            <span> total pages: 5</span>
            <select style="margin-left:10px">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>

Answer 2

Here is what your code is doing:

In the first line by using display: flex; justify-content: center;, your div would appear in one line as a flex and aligned center horizontally. Read more about flex at MDN

By using position: relative div is given a relative position so its child element would change its position according to parent div. You can read about position property more at MDN

flex: 1 1 0%; means it can grow or shrink according to width.

By styling position: absolute; right: 0 it is positioned relative to the parent div and would be on the exactly right of page

By using this description, you can change your code according to your needs

Answer 3

You can get rid of those expanding divs by setting the justify-content to "space-around" which surrounds the content of the div on both sides.

[edit] idk why it doesn't work in the "run code snippet" but I just checked in an html file in Firefox and Chrome, and it does work.

    <style>
      .pagination {
        display: flex;
        justify-content: space-around;
        position: relative;
      }
      .pagination-menu {
        position: absolute;
        right: 0;
      }
    </style>

    <div class="pagination">
      <div>
        <button>&lt;</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>&gt;</button>
      </div>

      <div class="pagination-menu">
        <span> total pages: 5</span>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
    </div>