I want to apply different item alignment in flex box

Question

This is my current code.

.d-flex {
  display:flex;
}

.flex-column {
  flex-direction: column;
}

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

<div class="d-flex flex-column align-items-center">
  <div>centered content1</div>
  <div>centered content2</div>
  <div>I want to be this content to be left-aligned</div>
  <div>centered content3</div>
  <div>...</div>
</div>

I can resolve this by adding a custom class to the desired div but I want to resolve this by only flex operation.

This means I want to resolve this by only using Bootstrap flex classes.

Is this possible?

Or are there any other easy solutions?

You have the `align-self` and `justify-self` properties that you can play with. https://developer.mozilla.org/en-US/docs/Web/CSS/align-self. I think you can use these classes https://bootstrapshuffle.com/classes/flexbox/align-self-*-center (link is broken, the *-center is part of it too) — arieljuod, Dec 29 '21 at 02:17

score 1 · Answer 1 · answered Dec 29 '21 at 04:21

.d-flex {
  display:flex;
}

.flex-column {
  flex-direction: column;
}

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

<div class="d-flex flex-column align-items-center">
  <div>centered content1</div>
  <div>centered content2</div>
  <div style="align-self: start;">I want to be this content to be left-aligned</div>
  <div>centered content3</div>
  <div>...</div>
</div>

I want to apply different item alignment in flex box

1 Answers1