CODEWITHSUNDEEP
htmlcssflexbox
user31782
user31782

Reputation: 7587

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

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?

Upvotes: 1

Views: 3367

Answers (1)

Waleed Jubeh
Waleed Jubeh

Reputation: 330

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.

Upvotes: 4

Related Questions