The block is zoomed in according to the parent width.

ide%5B%5D=&s_tag=jHDRCb4m" rel=" nofollow noreferrer "> https://www.airbnb.com/s/Oreg.

I found something about airbnb that I want to study, but I can"t steal it.
I know it"s flex-related technology
but it"s just his more special
. When you go in, you should see the housing information of five col. There are several lines of
browsers that first pull the width to a minimum and turn it into a mobile version of
. Then there is a
and then drag to the right until there are two col
and then to the right until there are four col
. I really want to steal and cannot steal
. Obviously, the width of the outside div is the same as the width of the inside picture.
enlarges
in proportion to the width of the father. The image size is assumed to be 160x100
and he will also zoom in to 320x200 according to the scale. Such as
how on earth is this done?!
the whole area zooms in to the lower right

Flex flexbox css-skills css css3

Jan.10,2022

I think there are two ways to achieve this layout, one is media query, the other is to use js to listen to resize events and adjust the layout

this is usually a media query, similar to this way of writing, making appropriate adjustments to each specific screen size

@media (max-width: 1030px) {
    .box {
        width:25%
    }
}

@media (max-width: 991px) {
    .box {
        width:33.3%
    }
}

@media (max-width: 721px) {
    .box {
        width:50%
    }
}

...

Previous: How to modify the lable color of el-form in element-ui?

Next: WeChat Mini Programs map component authentication failed?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e99a7b-47539.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e99a7b-47539.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?