Aligning items inside a row using flexbox along the horizontal axis

Question

I am trying to create a bar where items can be placed. The items can be aligned by adding a class to the bar itself, or by adding individual classes to the items. I can't get the second part to work properly. Anyway, here is the code:

.bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 80%;
    margin: auto;
    border: 1px solid black;
    padding: 10px;
}
.bar .item {
    display: flex;
}
.justify-content-between {
    justify-content: space-between !important;
}
.align-self-start {
    align-self: flex-start !important;
}
.align-self-end {
    align-self: flex-end !important;
}
.align-self-center {
    align-self: center !important;
}

<div class="bar">
  <span class="item">Item 1</span>
  <span class="item">Item 2</span>
  <span class="item">Item 3</span>
</div>

<br />

<div class="bar justify-content-between">
  <span class="item">Item 1</span>
  <span class="item">Item 2</span>
  <span class="item">Item 3</span>
</div>

<br />

<div class="bar">
  <span class="item align-self-start">Item 1</span>
  <span class="item align-self-center">Item 2</span>
  <span class="item align-self-end">Item 3</span>
</div>

As you can see, for the third bar, the alignment does not work with the utility classes. What am I doing wrong here? Please note that stretching the items to take up equal widths is not a solution for my use case. Any help is greatly appreciated.

you need to consider margin (margin-left:auto, margin-right:auto or margin:0 auto) — Temani Afif, May 17 '20 at 19:49

score 1 · Accepted Answer · answered May 17 '20 at 17:34

To Align self to work you have to use flex-direction:column; since it works for flex row by default.

If you see the output you can see the 3 values are flowing down to right side, those are meant to be in that way.

source to understand things.

Definition: Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

.bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 80%;
  margin: auto;
  border: 1px solid black;
  padding: 10px;
}

.bar .item {
  display: flex;
}

.justify-content-between {
  justify-content: space-between !important;
}

.bar1 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 80%;
  margin: auto;
  border: 1px solid black;
  padding: 10px;
  flex-direction: column;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="bar">
  <span class="item">Item 1</span>
  <span class="item">Item 2</span>
  <span class="item">Item 3</span>
</div>

<br />

<div class="bar justify-content-between">
  <span class="item">Item 1</span>
  <span class="item">Item 2</span>
  <span class="item">Item 3</span>
</div>

<br />

<div class="bar1">
  <span class="item align-self-start">Item 1</span>
  <span class="item align-self-center">Item 2</span>
  <span class="item align-self-end">Item 3</span>
</div>

Aligning items inside a row using flexbox along the horizontal axis

1 Answers1