Center One and Right/Left Align Other Flexbox Element

Center one and right/left align other flexbox element

Below are five options for achieving this layout:

CSS Positioning
Flexbox with Invisible DOM Element
Flexbox with Invisible Pseudo-Element
Flexbox with flex: 1
CSS Grid Layout

Method #1: CSS Positioning Properties

Apply position: relative to the flex container.

Apply position: absolute to item D.

Now this item is absolutely positioned within the flex container.

More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

Use the CSS offset properties top and right to move this element into position.

li:last-child {  position: absolute;  top: 0;  right: 0;  background: #ddd;}ul {  position: relative;  padding: 0;  margin: 0;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;}li {  display: flex;  margin: 1px;  padding: 5px;  background: #aaa;}p {  text-align: center;  margin-top: 0;}span {  background-color: aqua;}

<ul>  <li>A</li>  <li>B</li>  <li>C</li>  <li>D</li></ul><p><span>true center</span></p>

Flexbox row center one item and not the other

Just use margin-left: calc(50% - 100px); for .box.left This centers the blue box.

.container {
  display: flex;
  flex-direction: row; 
  align-items: center;
}

.box.right-item {
  background: red;
  width: 200px;
}

.box.left {
  background: blue;
  width: 200px;
  height: 20px; 
  margin-left: calc(50% - 100px);
  /*                        ↑ half of the width */
}

<div class="container">
  <div class="box left">
    xx
  </div>
  <div class="box right-item">
    yy
  </div>
</div>

Aligning elements left and center with flexbox

EDIT: See Solo's answer below, it is the better solution.

The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.

As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.

If you know the exact width of the "Left" div, then you could change justify-content to flex-start (left) and then align the "Center" div like this:

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)

#parent {  align-items: center;  border: 1px solid black;  display: flex;  justify-content: space-between;  margin: 0 auto;  width: 500px;}#right {    opacity: 0;}

<div id="parent">  <span id="left">Left</span>  <span id="center">Center</span>  <span id="right">Left</span></div>

Aligning elements left, center and right in flexbox

Use nested flex containers and flex-grow: 1.

This allows you to create three equal-width sections on the nav bar.

Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.

Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).

.nav {  display: flex;  height: 50px;      /* optional; just for demo */  background: white;}
.links {  flex: 1;          /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */  display: flex;  justify-content: flex-start;  align-items: center;  border: 1px dashed red;}
.header-title {  flex: 1;  display: flex;  justify-content: center;  align-items: center;  border: 1px dashed red;}
.logout {  flex: 1;  display: flex;  justify-content: flex-end;  align-items: center;  border: 1px dashed red;}
.links a {  margin: 0 5px;  text-decoration: none;}

<div class="nav mobilenav">
  <div class="links">    <a href="/institutions/">Institutioner</a>    <a href="/leaders/">Ledere</a>  </div>
  <div class="header-title">Institution institution 1</div>
  <div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>

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

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>

Center when only a single item in flexbox

.footer > :only-child
{
    margin-left: auto;
    margin-right: auto;
}

Flexbox align one element center and another at the bottom of the page

you can use position.

Add position:relative; to .inner_content

and position:absolute; and bottom:0; to .inner_content p

so your css looks like this

.flex {
  align-items: center;
  display: flex;
}

aside {
  background: url('../img/sidebar-image.jpg') no-repeat center/cover;
  height: 20em;
  width: 100vw;
  float: left;
}

.inner_content {
  justify-content: center;
  flex-direction: column;
  height: inherit;
  width: inherit;
  position: relative;
}

.inner_content p {
  font-size: 14px;
  margin-top: 2em;
  color: #FFF;
  position: absolute;
  bottom:0;
}

but you can do this in multiple ways

here is a link to a similar question explaining this in multiple ways:

Center and right align flexbox elements

Center One and Right/Left Align Other Flexbox Element