1

All tree divs are inside a parent with the following css:

display: flex;
flex-wrap: wrap;

Without the parent they each position themself under eachother.

With a width of more than 900px the green div is positioned to the left but still under the blue one. enter image description here With a width of more than ~800px but less than 900, blue and green are next to eachother while the green could be next to red enter image description here

Wanjia
  • 799
  • 5
  • 19
  • 3
    Add the code, and even better a jsfiddle or codepen example. – arieljuod Feb 07 '19 at 00:37
  • Don't have access to the school computer at this point in time, but will in a couple of hours. Will make a jsfiddle/codepen when I can. – Wanjia Feb 07 '19 at 00:47
  • That's not how flex (or the web page) work. Think of those blocks as very big words. The page is rendered line-by-line. At the end of a line, if there's not enough space to render the next word, it will be wrapped to the next line. The web flow is designed to make the order of the words (blocks) clear in a left-to-right, top-to-bottom manner. If you want those arbitrary-sized block to behave as if they're physical objects, you will need to calculate their position yourself and position them with `position: absolute;`. – AVAVT Feb 07 '19 at 05:39
  • Create a text paragraph with huge randomly-sized font-size and it will be clear how it works. Also, some library like masonry: https://masonry.desandro.com/layout.html could help somewhat. – AVAVT Feb 07 '19 at 05:42

0 Answers0