Using flex, one element centrally aligned and others spaced between the centre and right

Question

I'm having a bit of trouble to produce the below with flex box. I'd like a centrally aligned "title" with some buttons to the right (2,3,4).

The code below gets me close, but it's not perfectly aligned and loses it when the window resizes.

Any suggestions?

.header {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.title {
  width: 250px;
  margin-left: auto;
  margin-right: 15%;
}

.btn-group {
  margin-right: 15%;
}

<div class="header">
  <h1 class="title"></h1>
  <div class="btn-group">
    <button id="btn_1" class="selected">2</button>
    <button id="btn_2">3</button>
    <button id="btn_3">4</button>
  </div>
</div>

almost a duplicate: https://stackoverflow.com/q/38948102/8620333 .. you will need to use the same trick with some adjustment — Temani Afif, Jan 31 '20 at 20:23

score 1 · Answer 1 · answered Jan 31 '20 at 20:31

Here are my suggestions when using flexbox layout. You do not need to set the width on the element because the width will resize dynamically. When you set display as flex in the container, the x-axis would change to row by default then use flex property for 'title' class to expand the width to double the width of 'btn-group'. As the result, the second div will push all the way to the right and you can add the width of margin-right as how much you want it to be. Also, I would create another div after header and give it a class name as 'title' instead of giving it on h1. That way you would have two children that allow you to control it. See below how I fixed it:

h1 {
  text-align: center;
}

.header {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  flex: 1;
}

<div class="header">
    <div class="title">
      <h1>This is a title</h1>
    </div>

    <div class="btn-group">
        <button id="btn_1" class="selected">2</button>
        <button id="btn_2">3</button>
        <button id="btn_3">4</button>
    </div>
</div>

score 1 · Accepted Answer · answered Feb 01 '20 at 00:49

Here's a clean and simple process to get you to your layout:

First, note that CSS pseudo-elements (i.e., ::before and ::after), when applied to flex containers, are treated as flex items.

Create a pseudo-element to serve as the first flex item in the container.
Make the pseudo consume all available space (i.e., set it to flex: 1)
Do the same with your button group (.btn-group) on the opposite end (i.e., set it to flex: 1)

Now, with the outer items pressuring from both sides, the title is pinned to the middle of the container.

Make the button group container a flex container.
Set that container to justify-content: center.

Now, the individual buttons are horizontally centered on the right side of the already centered title.

.header {
  display: flex;
  height: 50px;
  align-items: center;
}

.header::before {
  content: "";
  flex: 1;
}

.btn-group {
  flex: 1;
  display: flex;
  justify-content: center;
}

<div class="header">
  <h1 class="title">1</h1>
  <div class="btn-group">
    <button id="btn_1" class="selected">2</button>
    <button id="btn_2">3</button>
    <button id="btn_3">4</button>
  </div>
</div>

To better understand the concepts and methodology at work here, see this post:

Center and right align flexbox elements

Using flex, one element centrally aligned and others spaced between the centre and right

2 Answers2