How to Center and Right-align on a row with CSS Flex only

Question

Tried many variations like this, but could not get it to work. Here is the last attempt:

.parent {
  display: flex;
  //justify-content: center;
  width: 600px;
  background-color: yellow
}
.c {
  //flex: 1 1 0;
  //text-align: end;
  margin-left: auto;
  margin-right: auto;
  background-color: cyan;
}  
.e {
  //flex: 1 1 0;
  // text-align: end;
  background-color: grey;
}  
.bs {
  background-color: green;
  color: white;
  width: 70px;
}

with html:

<div class="parent">
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

I know how to solve this by placing a 'visibility: hidden' button on the left-hand side and use justify-content with space-between, but I want to learn/know how to do it using CSS only.

Would be grateful for advice.

Asons · Accepted Answer · 2017-08-18T21:15:16.933

There is more than one way to do that.

Here with CSS only (no extra markup/hidden element) using a pseudo and make it and each button wrapper take 1/3 each of the total width, by giving them flex-basis: 100% and then the default flex-shrink: 1 will shrink them equally.

.parent {
  display: flex;
  width: 600px;
  background-color: yellow
}
.parent::before, .c, .e {
  content: '';
  flex-basis: 100%;
}
.c {
  background-color: cyan;
  text-align: center;
}  
.e {
  background-color: grey;
  text-align: right;
}  
.bs {
  background-color: green;
  color: white;
  width: 70px;
}

<div class="parent">
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

The above solution is based on the answer I gave here:

How to align groups of buttons on single row with Flex only?

And here is 3 more ways, where the first sample also solve this without any extra markup using absolute positioning

Center and right align flexbox elements

Dan Kreiger · Answer 2 · 2017-08-18T21:26:48.770

If you want it perfectly aligned, you can add an empty child div and split the three child divs into thirds.

This will work: CodePen Demo

.parent {
  display: flex;
  background-color: yellow;
}

.parent div {
  display: flex;
  flex-basis: calc(100% / 3);
}

.c {
  justify-content: center;
  background-color: cyan;
}

.e {
  justify-content: flex-end;
  background-color: grey;
}

.bs {
  background-color: green;
  color: white;
}

<div class="parent">
  <div class="a"></div>
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

Note: If you want the buttons to be the same size, you can add flex-basis: calc(100% / 3); to your .bs class in the code above.

You might want to add horizontal margin on the center buttons as well.

You can also create an empty child div and call justify-content: space-between on the parent container, but it won't be perfectly aligned: CodePen Demo, or use the snippet below.

.parent {
  display: flex;
  justify-content: space-between;
  background-color: yellow;
}

.bs {
  background-color: green;
  color: white;
}

<div class="parent">
  <div></div>
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

second example worked good – rnewed_user Jan 12 '23 at 22:47 — rnewed_user, Jan 12 '23 at 22:47

resander · Answer 3 · 2017-08-23T06:05:41.693

.parent00_100perc, .parent01_100perc {
  display: flex;
  width: 480px;
  background-color: yellow;
}

.parent00_100perc::before {
  content: '';
  flex: 0 0 100%; 
}
.parent01_100perc::before {
  content: '';
  flex: 0 1 100%; 
}


.spanflex00 { flex: 0 0 100%;}
.spanflex01 { flex: 0 1 100%;}

.bs {
  background-color: green;
  color: white;
  width: 70px;
}
.itemcenter {
  background-color: cyan;
  text-align: center;
}
.itemright {
  background-color: grey;
  text-align: right;
}

<p>Solution is by LGSon. I have just added a bit to verify I understand it by showing the initialisation and shrinkage phases of the solution, i.e.</p>

<p>Phase 1. initialisation that produces three parts of equal size on a single line. From left to right an empty part, a mid part with centred OK and Cancel buttons and a last part with a right-aligned Help button. Size of line 3x480px and is shown.</p>

<p>Phase 2. init & shrinkage that removes equal amount of space on the left and between the mid and right buttons. This leaves the OK and Cancel buttons still centred and shows a 480px wide result>


<p>Phase 1: after initialsation 0 0 100%</p> 
<div class="parent00_100perc">
  <span class="spanflex00 itemcenter">
    <button class="bs">OKAY</button>
    <button class="bs">Kancel</button>
  </span>
  <span class="spanflex00 itemright">
    <button class="bs">SOS</button>
  </span>
</div>

<p>Phase 2: init and shrinking 0 1 100%</p> 
<div class="parent01_100perc">
  <span class="spanflex01 itemcenter">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </span>
  <span class="spanflex01 itemright">
    <button class="bs">Help</button>
  </span>
</div>

<p>This method/solution can create a centred mid-part with one or two edge parts without adding empty divs or hidden elements to one of the edges.

How to Center and Right-align on a row with CSS Flex only

3 Answers3

Linked

Related