Css 我如何实现这种响应行为_Css_Responsive

Css 我如何实现这种响应行为

css

Css 我如何实现这种响应行为,css,responsive,Css,Responsive,我想用像这样的div实现一个响应迅速的图像横幅外观在移动设备上，所有图像应垂直对齐我试过很多把戏，但运气不好 <style> .columns { display: flex; flex-flow: row wrap; justify-content: center; margin: 5px 0; } .column { flex: 1; margin: 2px; padding: 10px; } </style&g

我想用像这样的div实现一个响应迅速的图像横幅外观

在移动设备上，所有图像应垂直对齐

我试过很多把戏，但运气不好

<style>
.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}
.column {
    flex: 1;
    margin: 2px;
    padding: 10px;

}
</style>

<section class="columns">
    <div class="column">
        <img src="image1.jpg" > 
    </div>
    <div class="column">
        <img src="image2.jpg" > 
    </div>
    <div class="column">
        <img src="image3.jpg" > 
    </div>
    <div class="column">
        <img src="image4.jpg" > 
    </div>
    <div class="column">
        <img src="image5.jpg" > 
    </div>

</section>


.栏目{
显示器：flex；
柔性流：行换行；
证明内容：中心；
保证金：5px0；
}
.栏目{
弹性：1；
保证金：2倍；
填充：10px；
}

这将让您开始：

<!DOCTYPE html>
<html>

<head>
<style>

    .img {
        min-height: 150px;
        min-width: 150px;
        background-image: url("https://via.placeholder.com/150");
        background-size: cover;
    }

    .image1 {grid-area: image1;}
    .image2 {grid-area: image2;}
    .image3 {grid-area: image3;}
    .image4 {grid-area: image4;}
    .image5 {grid-area: image5;}

    .grid-container {
        display: grid;
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
    }

    @media screen and (max-width: 500px) {
        .grid-container {
            grid-template-areas:
                'image1'
                'image2'
                'image3'
                'image4'
                'image5';
        }
    }

    @media screen and (min-width: 500px) {
        .grid-container {
            grid-template-areas:
                'image1 image5 image2'
                'image3 image5 image4';
        }
    }
</style>
</head>

<body>

<div class="grid-container">
    <div class="img image1"></div>
    <div class="img image2"></div>
    <div class="img image3"></div>
    <div class="img image4"></div>
    <div class="img image5"></div>
</div>

</body>

</html>


.img{
最小高度：150px；
最小宽度：150px；
背景图像：url（“https://via.placeholder.com/150");
背景尺寸：封面；
}
.image1{网格区域：image1；}
.image2{网格区域：image2；}
.image3{网格区域：image3；}
.image4{网格区域：image4；}
.image5{网格区域：image5；}
.网格容器{
显示：网格；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.网格容器{
网格模板区域：
“图像1”
“图像2”
“图像3”
“图像4”
“图像5”；
}
}
@媒体屏幕和屏幕（最小宽度：500px）{
.网格容器{
网格模板区域：
'图像1图像5图像2'
'图像3图像5图像4'；
}
}

我建议您搜索更多有关css网格和媒体查询的信息，它们是我们生活的css世界的热门话题。

谢谢noyloy。你的解决方案很有效。再次感谢你帮助我这样的新手。