How can I display an element to the left and other to the center using flexbox?

Question

I want to accomplish something like the image, but without the third element, having one element fixed on the left and another in the center.

Is there an easier way without flexbox?

<div style="display: flex; justify-content: space-between">
  <button>Left Header</button>
  <button>middle</button>
</div>

either put a dummy box in place of third box or just make the whole container's width 50%, then flex space-between on it. — Anuj Sharma, Apr 26 '21 at 17:10
if the parent container had 50% width the second element wouldn't be exactly in the middle — StudioWorks, Apr 26 '21 at 17:13
Please add your html and css. It will be easier to solve the issue. — Mir entafaz Ali, Apr 26 '21 at 17:13

score 1 · Accepted Answer · answered Apr 26 '21 at 17:18

Im sure there is a better way, but how about just hiding last column?

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  /* no important; just to visualize*/
  width: 50px;
  height: 50px;
  background-color: blue;
  border: 1px solid;
}

.item.last { /* :last-child doesn't work */
  visibility: hidden;
  background-color: red;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item last">C</div>
<div>

score 1 · Answer 2 · answered Apr 26 '21 at 17:29

You can use postion for first div and margin for the second div, like this

.container {
  postion: relative;
}

.item {
  width: 50px;
  height: 50px;
  background-color: teal;
  border: 1px solid grey;
}

.item.one {
  position: absolute;
}

.item.two {
  margin: auto
}

<div class="container">
  <div class="item one">A</div>
  <div class="item two">B</div>
<div>

score 1 · Answer 3 · answered Apr 26 '21 at 18:54

1

you can follow this code


<div style="display: flex; justify-content: space-between">
  <button>Left Header</button>
  <button style="margin-right: auto; margin-left: auto">middle</button>
</div>

answered Apr 26 '21 at 18:54

mohammad13

453
3
17

score 0 · Answer 4 · answered Apr 26 '21 at 17:07

0

You can just use flexbox "self-align".

Just check it here.

answered Apr 26 '21 at 17:07

AmirH.Najafizadeh

23
8

1

This only works if `flex-direction` is set to `column`, which results in the items not being displayed in the same row. – tobimori Apr 26 '21 at 17:14

How can I display an element to the left and other to the center using flexbox?

4 Answers4