-1

I was taking a course of html and css and the teacher explained that flex property is the shorthand of flex grow,shrink and basis. Why using flex:1; on every children makes them to behave diffrently from flex: 1 1 auto; or flex-grow:1;. And another question, why if i call flex: 1 in the parent container this isn't inherited by the children.

Pen link

div {
  width: 1366px;
  font-size: 30px;
  color: #009e2a;
  display: flex;
  background-color: #c9663e;
  gap: 30px;
}

.element1 {
  background-color: red;
  /*     flex-grow: 1; */
  flex: 1;
}

.element2 {
  background-color: blue;
  /*     flex-grow: 1; */
  flex: 1;
}

.element3 {
  background-color: navy;
  /*     flex-grow: 1; */
  flex: 1;
}
<div>
  <p class="element1">ana are mere djskahdkahk</p>
  <p class="element2">
    da chiar are mere dasldsakjdfhaskfjgsaj dkjashdkasghkd dkjsahdkja, fajkfa.hdkjash
  </p>
  <p class="element3">ce tar dalkjjd klashe</p>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Claudiu Claudiu Alexandru
  • 1
  • 1
  • Please read the [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/flex): *"One-value syntax: the value must be one of: a : In this case it is interpreted as flex: 1 0; the flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0."* – ThS Oct 11 '22 at 17:25

1 Answers1

0

According to the docs : flex : 1 is short for flex: 1 1 0 not flex: 1 1 auto.

With flex:1, flex-grow is 1, flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.

Also read up this bit, the property is not inherited.

Tushar Shahi
  • 16,452
  • 1
  • 18
  • 39
  • Tip: No need to keep commenting CSS properties, just write the one that you want in the end. They will override https://codepen.io/tushar8/pen/NWMerLP?editors=0110 – Tushar Shahi Oct 11 '22 at 17:32