Flex-grow doesn't work

[Ayala]

Hi!

In my code the flex-grow doesn’t work.
I use it at first time, my code more complex than in the flex-box tutorials and examples, that’s why the simple examples can’t help me..
I don’t understand which class I have to write “flex-grow” in.
I want that the second div would be twice width than the first.

My code:
http://codepen.io/Ayalann/pen/GjxpQb

[Paulie_D]

A few things.

Firstly, you can’t apply a fixed width AND flex-grow.

Secondly, flex-grow only works if the parent element has display:flex. In this case the section has display flex but the links do not and the flexgrow divs are children of the link…not the section.

It’s also not clear what look you are actually going for. Is the right side link supposed to be twice as big as the left…OR…is the text section of the link supposed to be twice as big as the picture?

Finally, flex-grow is NOT the same as width…If you want precise proportions, use percentages not flex-grow.

[Ayala]

Thank you for your answer!
I corrected some errors as you adviced.
I want that the right div (with picture and note too) would be twice big as left.
Now, the divs are in a coloumn, i don’t know why. They should be in a row.

(I want to do it with flex-box, because I want to understand it. Now I am learning :)

Te new code:
http://codepen.io/Ayalann/pen/GjxGxQ

[Paulie_D]

So you want something like this:

http://codepen.io/Paulie-D/pen/EgEdYq

Note, the parent section has display:flex which means that if the links are supposed to be 1/3 to 2/3 THEY are the ones that need to have the flex-grow value…in this case I just used flex:1 etc. which is the shorthand.

BUT, as I said, flexgrow is NOT the same as width. If you want the proportions to always stay the same you’ll need to use flex-shrink and flex-basis.

Note I have moved the text sections to outside the picture divs as it seemed that we waht you wanted.

[Ayala]

Nice!

But I don’t understant how could it work and in my site not.
There is something mistake.

Could you see it, please?

http://ayala.uw.hu/

Here, in the class “box” the “flex:1;” is disabled. Why?

I think I followed your example. Maybe the mistake is somewhere else.

I copied all here:
Maybe easier to see in this way:

http://codepen.io/Ayalann/pen/kkEQwL

[Paulie_D]

flex:1 won’t work unless the parent has display:flex.

Also, you can’t relate the size of one element to another unless they are siblings inside the same parent.

[Ayala]

The parent has the display:flex.
In the class “galeria” and in “vateralink”, too.
class “vateralink” is the parents,
class “galeria” is parent of “vateralink.”

They both have “display:flex”.

---

I don’t really understand what is the problem with the sizes.

[Paulie_D]

Also, you can’t relate the size of one element to another unless they are siblings inside the same parent.

If box1 and box2 aren’t in the same element you can’t relate their sizes. There is NO CSS method that can do that.

[Ayala]

Where should I write the size?
In your example you write max-width in the class of img, but it doesn’t work in my code.

http://codepen.io/Ayalann/pen/KgoLLO

[Paulie_D]

Where should I write the size?

You can’t….as I said..

If box1 and box2 aren’t in the same element you can’t relate their sizes. There is NO CSS method that can do that.

You’ll have to look into restructuring your HTML.

[Ayala]

Oh, so my html is wrong! I didn’t notice in your example that you put the “box” elsewhere, I was looking only the CSS.
Now I understand! Thank you very much for your help!!

[Ayala]

One more question:
With this flex-box can I declare how many box would be in one row?

[Author]

Posts