[solved] How to make flexboxes in Quasar
-
I am sort of new to Quasar, and I enjoy using a lot of flexbox CSS to get things looking how I want. I currently am combining some of this stuff with Quasar layout components and it works great, but I feel like I’m probably missing the point of some broader ideology in using Quasar. Am I reinventing the wheel?
https://codepen.io/rattjp/pen/BaQYxNE
I have read over the layout pages but I don’t quite see how I could accomplish this. Ideally i’d like it to put the “section2” part underneath section1 if you’re no a mobile but on the side like it appears in codepen if not on a mobile.
I am using Quasar v2.0.0-beta7.
-
I’m a terrible front-end developer, but is this what you are looking for?
https://codepen.io/smolinari/pen/xxRYjea
Scott
-
@s-molinari that seems to do the trick. I am terrible at front end too, but you are further along than me! Thanks!
-
No problem and your welcome. It’s hopefully understandable what I did, but to be clear, you can add the break points into the flexbox css in Quasar. xs, sm, md, xl, etc. That gives you the ability to “break point” how elements should react to different screen sizes (for a lack of a better way to say it).
Hope that makes sense. More about it here and when the points “break” (what pixel size): https://next.quasar.dev/style/breakpoints#introduction
If you need more programmatic control, there is the screen plugin: https://next.quasar.dev/options/screen-plugin
Scott
