Responsive Design
I love flex so much and its so good and so nice cause stuff just works and is intuitive and i love it so much and need to fill this website with text and i dont know what to write here so im just writing this.
Flexbox
Flexbox is a way to let elements on a website dynamically change position and size. I use it to have layers of divs within eachother and tell them in what way to align.
Flexbox for dynamics
Flexbox can dynamically change they layout of different elements. For example these info cards: I just set how many there are per row, 1, 2 or 3 (depending on how wide your device is), and flex dynamically alignes them.
Flexbox for static alignment
you can use th logic in flex to align divs even if they dont need to dynamically change alignment. for example on this page: the background is a div that has the title and bottom div in it and in the bottom div i have the info card divs like the one containing the text you're reading right now.
Breakpoints
By the with of the user device you can tell if its a phone, tablet or desktop. For example: on this website if you're on desktops there are 3 info cards per row, on tablets there are 2 and on phones there is 1. for all phones the text size is also smaller than desktop and tablet.
Don't use "px"
User devices have different sizes and resolutions. If you base the size of eveything on pixels, everything will have aconstant size and will be too smal or big for some users. this is why you use other units like: "vw", "vh" and "%" to nhot make things dependant on pixels. You can also use "dvh" which acts different on phones, sometimes in a good and sometimes in a bad way.