0

In the MDN article on justify-content they mention:

left: The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.

To me it is apparent what is meant by property's axis. Is it justify-content property's axis? And, what is inline axis -- inline text's baseline?

Practically justify-content: left and justify-content: start, behave exactly same for me, irrespective of writing direction.

Example:

.flex-container {
  display: flex;
  height: 200px;
  flex-wrap: wrap;
  justify-content: start;
  background-color: DodgerBlue;
  direction: rtl;
}

.two {
  justify-content: left;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-container .desc {
  font-size: 16px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="desc">Justify-content: start</div>
</div>

<div class="flex-container two">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="desc">justify-content: left</div>

</div>

As seen above, in the context of flexboxes, both left and start behave exactly same. So,

What is the difference between justify-content: left and justify-content: start?

user31782
  • 7,087
  • 14
  • 68
  • 143
  • 2
    Try making one of the flex container a flex column and you will see the difference. – Paulie_D Aug 25 '21 at 08:16
  • @Paulie_D I added `flex-direction: column;` on the flex-container div, and then I toggled `justify-content` between `left` and `start`. I did not see any difference. – user31782 Aug 25 '21 at 08:20
  • it seems your are testing on chrome, check out the support at the end on the MDN link. Only Firefox will give you a difference – Temani Afif Aug 25 '21 at 08:54
  • you should also understand that it's related to another specification (https://drafts.csswg.org/css-align-3/) not only the flexbox one. It's a more generic way to align in diferent situtation. A related question: https://stackoverflow.com/q/62350959/8620333 – Temani Afif Aug 25 '21 at 08:55
  • @TemaniAfif I tried in both firefox and chrome, and did not see any difference, if you want I can add a demo in the question itself. Secondly, I've heard of the new css3 box module alignment, but I don't know if `left` is not applicable to flexbox as well. – user31782 Aug 25 '21 at 08:59
  • I didn't say it's not applicable. The support is still low. In my Firefox I see a difference – Temani Afif Aug 25 '21 at 09:00
  • @TemaniAfif I just downloaded firefox today, and still don't see any difference on applying `flex-direction: column;` to the flex-container. Am I missing something? – user31782 Aug 25 '21 at 09:08
  • Hang on, I see a difference now, but its actually about respecting `direction: ltr`. – user31782 Aug 25 '21 at 09:09
  • you will see a difference in the row direction not the column one. The RTL doesn't affect the top/bottom direction but the left/right one – Temani Afif Aug 25 '21 at 09:10
  • @TemaniAfif I think chrome just fallbacks `left` to `flex-start`. Strangely, I don't understand what Paulie_D meant by his comment -- and its got 2 upvotes. https://jsfiddle.net/rpb03m4y/ shows no difference. – user31782 Aug 25 '21 at 09:17
  • 1
    ignore that comment, your issue is a browser support. Try playing with the value on Firefox and you will understand the difference between all of – Temani Afif Aug 25 '21 at 09:20
  • https://stackoverflow.com/a/54654208/12614207 – MahmouD Skafi Aug 25 '21 at 19:06

1 Answers1

2
justify-content: left

refers to the left direction. (always align the items from left to right)

justify-content: start

depends on the page or DOM direction (RTL, LTR), if the page is ltr then start refers to left and end refers to right (and this is why you see no change). while if the direction is RTL then, start refers to right and end refers to left.

Using start and end has a benefits in a website that has multiple languages or at least two languages that are different in the writing direction.

try to add direction: rtl into your HTML tag and see the difference.

Waleed Jubeh
  • 310
  • 1
  • 12
  • 1
    If you read my question carefully, you'll see, I have already added `direction: rtl` in my example, and `left` **does not** start from the left of the container. – user31782 Aug 25 '21 at 09:06
  • They have same `direction`, but is `left` supposed to push content to the physical left of the container or writing direction-left of the container. your answer suggests `left` doesn't respect `direction`. – user31782 Aug 25 '21 at 09:11
  • I've found out your answer stands corrected for Firefox, it's just chrome that makes `left` respect `direction. – user31782 Aug 25 '21 at 09:19