Why child element stick while using FlexBox

Question

When i use

.flex-container > div to reach all child div elements and collect 3rd div with .third

and use

.third{
  margin-left:auto;
}

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container > div {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width:5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.third{
  margin-left:auto;
}

<div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div class="third">3</div>
</div>

it is not worked. I want to know why it is not working?

Then i realize when i still use

.flex-container > div to collect all child divs

and get rid of margin-left: 1rem;

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container > div {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width:5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  /* margin-left: 1rem; */
}

.third{
  margin-left:auto;
}

<div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div class="third">3</div>
</div>

it works. I want know why it acts like sticked?

When collecting all child divs with .flex-container > * everything works perfectly

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container > * {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width:5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.third{
  margin-left:auto;
}

 <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div class="third">3</div>
</div>

score 2 · Answer 1 · answered Apr 01 '22 at 12:01

2

This is due to the behavior of the flex box. A flex box is very dynamic and can turn out differently depending on where it is used. Which means that you have to be very specific about an item in a flexbox to make sure that you mean exactly that one. For this reason, you can only address it as follows:

.flex-container div:nth-child(3) { ... },

#third { ... }

.container .third { ... }

answered Apr 01 '22 at 12:01

Maik Lowrey

15,957
6
40
79

1

When i use `margin-left: auto` in flexbox, my brain thinks that i am not using `margin-left` property, it thinks that i use a property which shoots an item to right. Than i realize they both are same :) – UPinar Apr 01 '22 at 12:10
@UPinar You can also use `margin: 0 0 0 auto;` :-) – Maik Lowrey Apr 01 '22 at 12:14
that is absolutely true sir :D – UPinar Apr 01 '22 at 12:16

Sigurd Mazanti · Accepted Answer · 2022-04-01T11:55:48.187

That's because .flex-container>div is a more direct selector than just .third.

Basically, margin-left: auto; is not applied to just .third.

More on CSS-specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

See below for an example with the selector .flex-container>div.third:

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container>div {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width: 5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.flex-container>div.third {
  margin-left: auto;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div class="third">3</div>
</div>

That also works, but I would advise you to (almost) never use it. Using `!important` can complicate things in the future as it has priority over everything else. Better to fix it properly right away! :) @UPinar — Sigurd Mazanti, Apr 01 '22 at 11:57

Why child element stick while using FlexBox

2 Answers2