Aligning Elements Left and Center with Flexbox

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 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>

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 center a flex container but left-align flex items

Flexbox Challenge & Limitation

The challenge is to center a group of flex items and left-align them on wrap. But unless there is a fixed number of boxes per row, and each box is fixed-width, this is currently not possible with flexbox.

Using the code posted in the question, we could create a new flex container that wraps the current flex container (ul), which would allow us to center the ul with justify-content: center.

Then the flex items of the ul could be left-aligned with justify-content: flex-start.

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

This creates a centered group of left-aligned flex items.

The problem with this method is that at certain screen sizes there will be a gap on the right of the ul, making it no longer appear centered.

Sample Image

This happens because in flex layout (and, actually, CSS in general) the container:

doesn't know when an element wraps;
doesn't know that a previously occupied space is now empty, and
doesn't recalculate its width to shrink-wrap the narrower layout.

The maximum length of the whitespace on the right is the length of the flex item that the container was expecting to be there.

In the following demo, by re-sizing the window horizontally, you can see the whitespace come and go.

DEMO

A More Practical Approach

The desired layout can be achieved without flexbox using inline-block and media queries.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

The above code renders a horizontally-centered container with left-aligned child elements like this:

Sample Image

DEMO

Other Options

Properly sizing and aligning the flex item(s) on the last row
Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space, sort of like a mason fitting stones in a wall. You’ve
probably seen it in use all over the Internet.

^{source: http://masonry.desandro.com/}
CSS Grid Layout Module Level 1

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

^{source: https://drafts.csswg.org/css-grid/}

Flex box alignment of left and centre elements

#xxx {

      position:relative;

      display:flex;

      height:32px;

      width:150px;

      background-color:black;

      color:white;

      font-family: Helvetica, Arial, sans-serif; 

      margin-left:20px;

   }

    span {

      align-self: center;

      margin-left:25%;

   }

  img{

  position:relative;

  }

<!DOCTYPE HTML>

<html>

     <body>

      <div id="xxx"><img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/yoshi-super-mario-01.png" height="32" width="32"/>

        <span>hello</span>

       </div>

   </body>

</html>

Displaying flexbox centered but align items left like text align left

If you are open to include another wrapper in your markup, it is easy:

Use align-items: flex-start (or let it take the default stretch value) for the #donateList
Center align vertically and horizontally the new wrapper div.

See demo below (also removed some redundant styles):

main { /* ADDED */

  display: flex;

  align-items: center;

  justify-content: center;

}

#donateList {

  display: flex;

  justify-content: center;

  align-items: flex-start; /* CHANGED */

  /*align-self: center;*/

  flex-direction: column;

  flex-wrap: wrap;

}

.donateItem {

  flex: 0 1 auto;

  /*align-items: flex-start;

  justify-content: flex-start;

  align-self: center;*/

}

.donateItem * {

  display: inline-block;

}

.donateItem p {

  vertical-align: bottom;

}

.donateItem img{

  height: 64px;

  width: 64px;

}

<main>

  <div id="donateList">

    <div class="donateItem">

      <img src="http://placehold.it/100x100">

      <p>Bitcoin:</p>

      <p>fkewjhf;eiwhf;iewfhwehfewifhew</p>

    </div>

    <div class="donateItem">

      <img src="http://placehold.it/100x100">

      <p>Paypal:</p>

      <p>eijfhewfwifhefefewf</p>

    </div>

  </div>

</main>

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>