Flexbox对齐不起作用

Question

I have a container of items with the following style:

 .container-ok { display: flex; flex: 0 1 auto; flex-direction: column; align-items: flex-end; } .container-error { display: flex; flex: 0 1 auto; flex-direction: column; justify-content: flex-end; } .item { width: 3rem; border: 1px black solid; } 

 <div class="container-ok"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="container-error"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> 

I'm expecting that all the items in the container are rendered in one column and are on the right side, but it's not working. When I remove flex-direction , it works but I have as example 3 items and they are in a row (3 columns) not one column. If I remove justify-content and replace it with align-items , it works. But align-items is for vertical alignment.

What am I doing wrong?

thank you

Answer 1

If I understood you right, you want to achieve this result

HTML

<div class="container-ok">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container-error">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container-ok {
  display: flex;
  flex: 0 1 auto;
  justify-content: flex-end;
}

.container-error {
  display: flex;
  flex: 0 1 auto;
  justify-content: flex-end;
}

.item {
  width: 3rem;
  border: 1px black solid;
}

Also there is a nice guide to flexbox, maybe it will help you

Answer 2

Justify content declaration works because it defines the alignment along the main axis. Instead justify content not work because It defines the default behaviour for how flex items are laid out along the cross axis on the current line. You can think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).