Aligning Elements Left, Center and Right in Flexbox

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>

How to align flexbox columns left and right?

You could add justify-content: space-between to the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

Updated Example

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#container {    width: 500px;    border: solid 1px #000;    display: flex;    justify-content: space-between;}
#a {    width: 20%;    border: solid 1px #000;}
#b {    width: 20%;    border: solid 1px #000;    height: 200px;}

<div id="container">    <div id="a">        a    </div>    <div id="b">        b    </div></div>

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>

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 three elements (left/center/right) inside a container

You can build the layout with CSS flexbox.

For clarity and conciseness, I removed several non-essential decorative styles from the original code. I also used compiled CSS for the benefit of those who don't use preprocessors.

layout 1: [left] [center] [right]

#header-wrap {  display: flex;                   /* 1 */  align-items: flex-start;         /* 2 */  justify-content: space-between;  /* 3 */  text-align: center;  padding: 1rem 0;}
#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }.header-left   { border: 1px solid red; width: 100px; }.header-right  { border: 1px solid red; width: 100px; }.header-center { border: 1px solid red; width: 100px; }

<section id="header-blue">  <div id="header-wrap">    <div class="header-left">      <p>1</p>    </div>    <div class="header-center">      <p>2</p>      <p>2</p>      <p>2</p>      <p>2</p>    </div>    <div class="header-right">      <p>3</p>      <p>3</p>    </div>  </div></section>

Align my flex items left, middle and right

Try using auto margins to push the left and right elements away from the middle element.

(Also, since you're using the HTML5 nav element and CSS3 properties, you really don't need a ul to structure your layout. You can simplify your code substantially.)

nav {  display: flex;  align-items: center;}
nav > * {  border: 1px solid red;}
.nytl {  margin: 0 auto;  width: 189px;  height: 26px;}
hr {  margin-top: 10px;}
* {  padding: 0;  margin: 0;}

<nav>  <a href="#">    <img src="https://img.icons8.com/material-outlined/16/000000/menu.png">  </a>  <a href="#">    <img src="https://img.icons8.com/material-rounded/16/000000/search.png">  </a>  <a href="#">SPACE & COSMOS</a>  <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">  <button>Subscribe</button>  <button>Login</button></nav><hr>

Align 3 unequal blocks left, center and right

You can consider flex-grow:1;flex-basis:0% for the left and right elements then use text-align to align content inside. I have added an extra wrapper to keep the background only around the text.

The trick is to calculate the free space by removing only the middle content and split it equally to the left and right element.

.container {
  margin: 20px 0;
  padding-top:10px;
  background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
}

.row {
  background-color: lime;
  display: flex;
  color: #fff;
}

.item:not(:nth-child(2)) {
  flex-basis: 0%;
  flex-grow: 1;
}

.item:last-child {
  text-align: right;
}

.item span{
  background-color: blue;
  display:inline-block;
  padding: 16px;
  border: 2px solid red;
  box-sizing:border-box;
}

<div class="container">
  <div class="row">
    <div class="item"><span>left, slightly longer</span></div>
    <div class="item"><span>center, this item is much longer</span></div>
    <div class="item"><span>right</span></div>
  </div>
</div>

Flex Box aligning items in center instead of left

Remove the margin from the row because this causes the products to have margin on both sides what causes the products to shift to the middle.

Try this css code instead:

.product-display .row {
    max-width: 100%;
    margin-top: 4rem;
    margin: initial;
}

How to align the first two elements on the left and the last on the right with display flex

Remove space-between and add margin-left:auto to the relevant icon.

.icon_item {
    display: flex;
  
}

.icon_item:after {
  font-family: fontAwesome;
  content: '\f107';
  margin-left:auto;
}

.icon_item.visible:after {
  font-family: fontAwesome;
  content: '\f068';
}

.icon_item:before {
 font-family: fontAwesome;
 content: '\f1ec';
 margin-right: 10px;
 width: 22px;
 height: 22px;
 display: flex;
 align-items: center;
 justify-content: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="btnDrop">
 <span class="icon_item">Calculator</span>
</div>

---

Related Topics