Can someone explain me what is flex property?

Question

Hello currently I'm learning flexbox, and I've watched a lot tutorials but I couldn't figure out what does flex property do? Some explanation and links that explain what it does would be really helpful. Thanks.

Answer 1

As T. Evans mentioned, the flex property is shorthand for three other properties: flex-grow, flex-shrink, and flex-basis. You can set the values of each property by giving the flex property three values, in this order:

flex: [flex-grow] [flex-shrink] [flex-basis] 

For example, flex: 0 1 auto;

Now, let’s briefly review what each of those three properties means.

Flex-grow

We use this property on a child element of a flex-box. It sets how large the element will be in proportion to the other elements. The default value of flex-grow is 0, so setting flex-grow to larger than 0 will make the element larger than other elements. (You can’t set it to a negative number, though.)

Example 1: Here, we use flex-grow to make one element twice as large as the other. A flex-grow of 2 on one element and 1 on the other element means that the elements will have a 2-to-1 size ratio. Setting one flex-grow to 8 and the other to 4 would do the exact same thing, since 2:1 is the same ratio as 8:4.

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#big {
  flex-grow: 2;
  background-color: lavender;
}

#small {
  flex-grow: 1;
  background-color: lightblue;
}

<div id="flexbox">
  <div id="big">BIG</div>
  <div id="small">SMALL</div>
</div>

JSFiddle

Example 2: Here, we set flex-grow on only one element while leaving the other at its default of 0. This makes the element grow to fill as much space as possible. We can use any value for flex-grow and it will work exactly the same, as long as the other element has flex-grow: 0;

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#big {
  flex-grow: 5;
  background-color: lavender;
}

#small {
  /* flex-grow is 0 by default */
  background-color: lightblue;
}

<div id="flexbox">
  <div id="big">BIG</div>
  <div id="small">SMALL</div>
</div>

JSFiddle

Flex-shrink

This property works similarly to flex-grow, but the ratio describes how much smaller one element should be than another. Also, the default value is one.

Example: If we set one element’s flex-shrink to 2 and the others' to 1, when the parent element is too small to fit every element comfortably and the children must shrink, that element will shrink more than the other elements.

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#flexbox div {
  flex-grow: 1;
  border: 1px solid purple;
  background-color: lavender;
}

#flexbox #small {
  flex-shrink: 4;
  background-color: lightblue;
}

<div id="flexbox">
  <div>NORMAL</div>
  <div id="small">SMALL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
</div>

JSFiddle

Flex-basis

This property sets the initial size of the element. Its value can be either auto, which sets the initial size automatically, or a number of pixels or other size units (like % or vw, for example.) The default value is auto.

Example: Here, we set most of the elements to have an initial size of 50px and set their flex-grow to 1 so that they will grow to fill the space. However, one element has a flex-basis of 100px, so it will be larger than the other elements. Try resizing the window to see how this example behaves.

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#flexbox div {
  flex-grow: 1;
  flex-basis: 50px;
  border: 1px solid purple;
  background-color: lavender;
}

#flexbox #large {
  flex-basis: 100px;
  background-color: lightblue;
}

<div id="flexbox">
  <div>NORMAL</div>
  <div id="large">LARGE</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
</div>

JSFiddle

Putting it all together

As we mentioned before, the flex property combines all three of those properties into one. If we wanted to set the flex-grow of an element to 1, the flex-shrink to 2, and the flex-basis to 100px, we could use flex and shorten this:

#child {
    flex-grow: 1;
    flex-shrink: 2;
    flex-basis: 100px;
}

To this:

#child {
    flex: 1 2 100px;
}

Answer 2

Flex Property is referring to a shorthand.

Basically it looks like this : flex: <flex-grow> <flex-shrink> <flex-basis>

This refers to how the items work more in a display: flex...

For more on this I would suggest looking at the following links:

W3 Schools

CSS Tricks

MDN