Streaming live at 10am (PST)

Square box in flexbox


#1

Hi Webflow Team,

Thank you so much for the amazing flexbox feature! I love it! It's something I always wished for! I can tell you guys put lots of thoughts into this feature! So useful!!!! This is definitely one of the game changing features! YOU ARE AMAZING!

I wish there is a way to make the individual boxes a square (ie, set height equal to width). I understand there might be technical limitations, and css doesn't have off shelf solution to do that.......

I have seen interesting hacks around the problem such as this: https://jsfiddle.net/3z887swo/4/

Can you guys please consider building this feature if it is feasible?


Square divs in flexbox
#2

haha

There is a neat trick, it is my favorite one. Wait a sec.


#3

the neat rule is:

If the vertical paddings (and margins) are specified in percent (%) values, the size is a percent of the width of the containing element.

So the magic CSS elastic square could be:

div.elastic-square { width: 33%; height: 0; padding-bottom: 33%; position:relative }


#4

More rules:

  1. A percentage value on top/bottom padding or margins is relative to the width of the containing block
  2. A percentage value on height is relative to the height of the containing block (same for min/max height)
  3. a Percentage value on top and bottom values for a positioned element is relative to the height of the containing block (hat tip to Hashem Qolami for the reminder)
  4. Percentage values are not allowed on border widths (not even left and right)

#5

Hi Vincent,

Thank you for your help!!!

I tried this method, and does not seem to work for me...... maybe I missed something.

I set the div css as you suggested, gave it a background colour and the div does not show up at all in the browser.
When I add content to the box, Webflow designer and chrome only render the content height, not the percentage height I set on bottom margin.


#6

Can you share your public link?


#7

Here you go:
https://preview.webflow.com/preview/testing-playground-5692ea?preview=1
Thanks!


#8

why not just use VW or VH?

Easy peasy: width 10vw, height 10vw (never put a space before vw or vh)


#9

Hi Tom,

Thanks for your suggestion. Does VW and VH work when they are nested elements?
Also, not all browsers support VW to my understanding.....


#10

http://caniuse.com/#search=vw

You're going to lose all the audience from Opera Mini

:wink:


#11

It's broken for me



#12

Just tested it, it behaves the same as the method I described. Minus the complicated rule :smiley:

I don't often think of using VW for heights and VH for widths...


#14

Opera what? :slightly_smiling:

My concern would not be 'is vw or vh supported well enough in browsers' but 'is flex box well enough supported in browsers'.

IE unfortunately is used fairly wide spreaded, also where I live (in the Netherlands), I've seen figures of 24% to date. I've used flex box on my new site (www.reclamers.nl) for some parts, and from what I've seen in emulators of IE 11, it doesn't look good...

Tom


#15

Thanks Tom! Thats good to know...


#16

Can you please try this one instead?

https://preview.webflow.com/preview/testing-playground-5692ea?preview=f75f3fdef31984cde7bf2c5ec94e6304


#17

Now that Flexbox is here I have set a new virtual machine with windos and a previous version of IE. I'm not wondering if FB is supported, but rather how well my design degrades when there is no support. I make sure the site is still readable, makes sense.

Most of the time the layout break a little but it's still very ok.


#18

Just wanted to thank you again. I checked my code today and figured out what's broken.
Your solution worked!!!!
This is exactly what I was looking for. Thanks!

http://testing-playground-5692ea.webflow.io/


#19

I tried to use VH and VW, but it seems to scale to the entire browser instead of its parent container.....

Would definitely be a great solution if it can work on nested elements : )

But I never thought of using VH and VW on divs! Nevertheless this is inspiring and I can already see it become very useful for other use cases.

Thanks!


#20

That's exactly what it's for. VH means "in percentage of the browser height".

If you want to dimension an element depending on its container, use %. but the container must have known dimensions, like height or width set, or it doesn't work


#21

Vw and vh can be helpful but it certain isn't a solution to everything but it can overcome some problems when we don't have enough possible breakpoints for example with some heading types.

@vincent aren't percentages always based on the width of its parent container?

Greets
Tom