justify-self css property does not produce a desired effect

Question

justify-self is not working. Why?

html

<div class="container">
  <div class="a">

  </div>
  <div class="b">

  </div>
  <div class="b">

  </div>

</div>

css

.container {
  display: flex;
  justify-content: center;
  background: yellow;
}

.container * {
  width: 10px;
  height: 10px;
  background: green;
  border: 2px solid red;
}

.a {
  justify-self: start;
}

jsfiddle

I would expect the first element to be aligned to left since it has class a and class a specifies justify-self: start, but that does not happen. Why?

As I was informed in comments flexbox does not support the justify-self property. Then how could I position two of children in middle of the parent and one child stick to the left side of the parent using for example grid?

*In flexbox layouts, this property is ignored* This only works for grid. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self — Gerard, Oct 24 '18 at 13:21

Ado · Accepted Answer · 2018-10-24T13:34:43.053

-1

You don't need grid for this.
Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts.

You can do this in multiple ways. Michael_B explained this very good in this similar question center-and-right-align-flexbox-elements

edited Oct 24 '18 at 13:34

answered Oct 24 '18 at 13:28

Ado

637
1
6
17

this is more suitable as a comment than an asnwer .. basically you are simply linking to another question – Temani Afif Oct 24 '18 at 13:42

justify-self css property does not produce a desired effect

1 Answers1