How to Align Flexbox Columns Left and Right

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>

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>

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>

Align flex-column items to left and right within one parent Div

In your provided stackblitz i made following changes:-

Working Stackblitz :-
https://stackblitz.com/edit/angular-ivy-tkgnym?file=src%2Fapp%2Fapp.component.css

app.component.css :-

p {
  font-family: Lato;
}
.toast-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.justify-content-end {
  justify-content: flex-end;
}
.my-toast {
  display: flex;
  width: 100%;
}

app.component.html

<div class="toast-container">
  <div class="my-toast" [ngClass]="{'justify-content-end': comment?.username === 'right'}" *ngFor="let comment of comments">
    <hello [comment]='comment'>
    </hello>
  </div>
</div>

hello.component.ts(template)

<div class="toast">
      <div class="toast-header">
        <strong class="mr-auto text-primary">{{ comment.username }}</strong>
      </div>
      <div class="toast-body">
        {{ comment.comment }}
      </div>
    </div>

hello.component.ts (style)

.toast {
        border: solid;
        min-width: 12vw;
        margin: 0.6rem;
        display: flex;
        flex-direction: column;
        width: max-content;
      }
      :host {
        display: flex;
      }

Using a flexbox, how can I align one element on the far left, one on the far right and another below the far right one?

Flexbox Solution

Here is a simple example. Both items on the first row take up 50% of space. The last item is pushed to the far right using margin-left: auto.

.container {  display: flex;  flex-wrap: wrap;}
.one, .two {  flex-basis: 50%;}
.two {  text-align: right;}
.three {  margin-left: auto;}

<div class="container">  <div class="one">    one  </div>  <div class="two">    two  </div>  <div class="three">    three  </div>  </div>

How can I align varying length text flexbox elements to fixed-size iframe flexbox elements?

Not sure why you have the extra div element, I don't see any purpose for that.

If I understand the layout you're going for, this should give you a cleaner start...

You have rows (.serv). Inside each row you have containers (.container). The containers have the img/iframe + p stacked normally, don't need any special CSS to line up the left edge.

Then your 83px gap that before was separating your containers, is moved to the container as a margin to separate the containers.

Seems to me the biggest problem with your original code is having a plain div inside a plain div (no classes). And using .serv div as a CSS selector. That CSS is going to apply to your top div under .serv, and all of the divs under that div. That's why the row-gap was applying to the nested divs. Having a CSS selector so unspecific and HTML without classes is inviting trouble IMO. Best to use class names and good specific selectors to avoid unintended consequences.

Note: I added an extra .serv row to show wrapping.

.serv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: 44px;
  margin-left: 44px;
  border: 2px solid red;
}

.serv .container {
  margin-right: 83px; /* I moved this here to separate your container divs inside the row */
  border: 2px solid blue;
}

.serv p {
  font-size: 10px;
  color: #000000;
}

<div class="serv">
    <div class="container">
      <p>test test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
    
    <div class="container">
      <p>test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
  </div>
  
  <div class="serv">
    <div class="container">
      <p>test test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
    
    <div class="container">
      <p>test</p>
      <iframe style="background:grey" width="100" height="100" frameborder="0"> </iframe>
    </div>
  </div>

How to Align Flexbox Columns Left and Right