I have a flex container with 3 divs, that have very little size (as an example, 253px in my situation). I intend to attain this practices:
- if internet browser home window size is equivalent or greater than (253 * 3) pixels (plus some even more pixels, since internet browser likewise includes some margin on right as well as left, as an example, Mozilla Firefox includes 8 +8 px), than reveal these 3 divs in one row
- if internet browser home window size is much less than (253 * 3) pixels (plus some even more), than area these divs one-under-another. So 3 divs – 3 rows.
Currently I have this component of code, with “flex-wrap: cover” residential property:
<< div design=" screen: flex; flex-direction: row; justify-content: flex-start; flex-wrap: cover;">>. << div design=" size:33%; min-width:253 px;">> EXAMINATION DIV PRIMARY<. << div design=" size:33%; min-width:253 px;">> EXAMINATION DIV SECOND<. << div design=" size:33%; min-width:253 px;">> EXAMINATION DIV NUMBER 3<. <
However it is not specifically that i demand, since it can be a circumstance, when we have 2 rows (2 divs in very first row, one in 2nd row). I require or 1 row, or 3 rows.
I attempt to make this with flex technique, since somehow i can not utilize @media policy technique.
So what i can add/fix in my code?