Question

对于html / CSS来说，是新手，学习弹性框，我觉得我正确地遵循了W3schools网站example，并且我还从here那里获取了一些代码来使其具有响应性，但是我不能在缩小视口时获取要包装的图像。

这是我要开始的代码： CSS：

* {font-family: arial, sans-serif; box-sizing: border-box;}

html body {margin: 0;}

.flex-container {
    display: flex;
    margin: 0 .5%;
}

.flex-container > div {
    margin: 1%;
}

.whatwecando {padding-top: 125px;
padding-bottom: 15px;
}

.nav {position:flex; top:0; left:0;
    background-color: black;
    font-size: 20px; 
    float: left; 
    border-radius: 0px;
    border: none;
    width: 100%;
    overflow: hidden;
    margin: 0;
    list-style-type: none;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}

.item {
    color: white;
}

.item:first-child {
    height: 50px;
    line-height: 50px;
}

@media screen and (max-width:500px){
    .column {
        width: 100%;
    }
}

ul {list-style: none}

HTML：

<div class="flex-container">

<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Banners" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Posters" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Flock again" /></div>

当我在容器类中添加flex-wrap: wrap;（从逻辑上讲是解决方案）时，所有图像都垂直排列，因此我将其删除。我正在尝试像图像网格一样创建图像，不是正确理解了弹性框吗？

Answer 1

这是一个简单而又不错的guide to flexbox content。我认为您混入了一些东西（css和html中的类）。

这是尝试使图像具有相同大小的另一件事：

.image-container{
    width:100px;
}
.image-container img {
    width:100%;
    height:100px;
    object-fit:cover;
}

（图像高度必须固定才能正常工作）。

用相同大小的图像创建一个响应式弹性框

1 个答案: