I'm new to learning flexbox in CSS. I'm trying to figure out how I can make the furthest right div block wrap underneath it's neighboring div when resizing or zooming in on the screen.
The easiest way for me to explain this is to show a before and after picture of a div block and how I want it to respond (see pictures).
BEFORE AT 100% ZOOM LEVEL:
AFTER AT 130% ZOOM LEVEL:
Once again, I'm trying to use flexbox to achieve this. I'm attempting to copy the responsiveness of aliexpress divs located near the top of their homepage (if you want an exact reference to look at). At 100% zoom the boxes are one way, and at 130% zoom they are manipulated as shown in the pictures I've attached.
How can I do this with flexbox? Or should I scrap flexbox and try another way?
*EDIT
I used a combination of flexbox and a media query to finally figure it out.
When you run the code snippit you will notice how the media query breakpoint happens between 120%-130% zoom level. Aliexpress homepage has a breakpoint between the same zoom percentages, which was my goal.
I'm quite proud of myself as a complete newbie at flexbox and media query :)
body { font-size: 100px;}.container { display: flex; flex-direction: row; flex-wrap: wrap;}.items { border: 1px solid lightgreen; padding: 5px 10px; background-color: aliceblue; margin: 2px;}.a { padding: 5px 100px;}.b { display: flex; padding: 5px 36px; width: 50px;}.c { max-width: 50px; padding: 5px 36px; width: 50px;}.breakpoint { opacity: 0;}/* media query */@media screen and (max-width:1700px) { .b, .c { position: absolute; opacity: 0; } .breakpoint { display: flex; opacity: 1; } .breakpoint-b { display: flex; background-color: aliceblue; border: 1px solid lightgreen; padding: 5px 36px; margin: 2px; } .breakpoint-c { background-color: aliceblue; border: 1px solid lightgreen; padding: 5px 10px; margin: 2px; padding: 5px 36px; }}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="resources/images/styles-testing.css" /><title>TESTING</title></head><body><div class="container"><div class="items a">a</div><div class="items c">c</div></div><div class="items b">b</div><div class="breakpoint"><div class="breakpoint-b">b</div><div class="breakpoint-c">c</div></div></body></html>