What should I use to move flex items through main axis?

Question

In flexbox there's a align-self property which lets to move a flex item through cross axis. I heard there isn't a justify-self property . So is there any way to make it flex-start/center/flex-end on main axis for a flex item?

You can do some more learning on the container/items on flex. The guide from css-tricks seems to be good for you https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Toan Lu, Jul 13 '18 at 07:58
It's good to consider the related question you get when writing yours ... the second one was the one you need — Temani Afif, Jul 13 '18 at 08:39

score 0 · Answer 1 · answered Jul 13 '18 at 08:26

Use margins.

.container {
  display: flex;
  width: 800px;
  height: 500px;
  background: blue;
}

.child {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
  align-self: flex-end;
}

.child:last-of-type {
  margin-left: auto;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

You can use the default behaviour of margin-left / right to influence individual items.

What should I use to move flex items through main axis?

1 Answers1