Flexbox - take the element right "flex-direction: column" without use position in css

Question

Flexbox - take element right flex-direction: column; without use position in CSS Hey guys I want to take my element (one row) to right, but without use positioning.

This cod contain flex-direction: column; and I can't control rows position. How can I achieve it in right way with flexbox elements.

body {
  margin: 0;
  background-color: rgb(247, 176, 232);
}

.container {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.box {
  background-color: red;
  height: 20px;
  width: 50%;
}

<div class="container">

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

Answer 1

flex-direction got nothing to do with positioning what it do is just to change the direction of an element in 4 ways that are row, column, column-reverse and row-reverse so use align-self on the div.box instead where you will set it to flex-end to align it the right or flex-start to align it to the left

Note: self-align depends on the flex-direction means that values on flex-direction can affect it

Example

body {
  margin: 0;
  background-color: rgb(247, 176, 232);
}

.container {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.box {
  align-self: flex-end;
  background-color: red;
  height: 20px;
  width: 50%;
}

<div class="container">

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

Answer 2

The margin-left property sets the left margin of an element.

body {
  margin: 0;
  background-color: rgb(247, 176, 232);
}

.container {
  display: flex;
  flex-direction: column;
  height: 50px;
}

.box {
  background-color: red;
  height: 20px;
  width: 50%;
}
.right-element {
  margin-left: auto;
}

<div class="container">

  <div class="box"></div>
  <div class="box right-element"></div>
  <div class="box"></div>

</div>