非全尺寸浏览器时不同尺寸的弹性容器

问题描述

我 900px 及以下的 3 个容器很好，在这个宽度上使用 900px 的规则，即 flex-direction:column ，所以没有发布。 在我的全尺寸浏览器 (1366px) 中，容器的高度/宽度也相同。 在 920-1055px 宽（更宽，JSfiddle 只能在我的显示器上那么宽）之间的任何地方，容器的高度/宽度都不相同。 在当前错误宽度之间调整大小时，如何使内容较少（在本例中为字符）的容器与其他容器保持相同大小？

JSFiddle

    <div class="ix-cards">
        <div class="ix-services">
            <div class="ix-cardscontent ix-c-content1">
                <div class="fas fa-umbrella-beach"></div>
                <h2>Holiday Rentals</h2>
                <p>See our selection of Private Apartments and Villas for Rent in Cala Bona,Cala Millor,Cala Ratjada and Cala Anguila.</p>
                <a href="Holiday-Rentals.html">Read More</a>
            </div>   
            <div class="ix-cardscontent ix-c-content2">
                <div class="fas fa-globe-europe"></div>
                <h2>discover</h2>
                <p>300+ sunny days a year. 4000+ bars &amp; restaurants. 2000+ accomodations. It's easy to see why Mallorca is a vacation hotspot.</p>
                <a href="#">Read More</a>
            </div>
            <div class="ix-cardscontent ix-c-content3">
                <div class="fas fa-building"></div>
                <h2>Properties For Sale</h2>
                <p>Looking to sieze your own piece of heaven on the island? Look no further,we have what you're looking for,at a click of a button.</p>
                <a href="#">Read More</a>
            </div>    
        </div>
    </div>

    .ix-cards{
max-width:1300px;
margin:0 auto;
text-align:center;
padding:30px;
    }

    .ix-services{
display:flex;
align-items:center;
    }

    .ix-cardscontent{
display:flex;
flex-wrap:wrap;
flex:1;
margin:20px;
padding:20px;
border:2px solid black;
border-radius:4px;
Box-shadow:0 4px 8px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,1);
transition: all 0.9s ease;
    }

    .ix-cardscontent .fab{
font-size:70px;
margin:16px 0;
    }

    .ix-cardscontent .fas{
font-size:70px;
margin:16px 0;
    }

    .ix-cardscontent > *{
flex: 1 1 100%;
    }

    .ix-cardscontent:hover{
color:white;
    }

    .ix-cardscontent:hover a{
border-color:white;
background:white;
color:black;
    }

    .ix-c-content1:hover{
border-color:#50C878;
background:#50C878;
transform:scale(1.1)
    }

    .ix-c-content2:hover{
border-color:#FFC30B;
background:#FFC30B;
transform:scale(1.1)
    }

    .ix-c-content3:hover{
border-color:#DE3163;
background:#DE3163;
transform:scale(1.1)
    }

    .ix-cardscontent h2{
font-size:30px;
margin:16px 0;
letter-spacing:1px;
    }

    .ix-cardscontent p{
font-size:17px;
    }

    .ix-cardscontent a{
margin:22px;
background:black;
color:white;
text-decoration:none;
border:1px solid black;
padding:15px 0;
border-radius:25px;
transition:.9s ease;
    }

    .ix-cardscontent a:hover{
border-radius:4px;
    }

    @media (max-width:900px){
.ix-services{
    display:flex;
    flex-direction:column;
}
    }

解决方法

正如 s.kuznetsov 在上面的评论部分所说，从 align-items: center 中删除 .ix-services 效果很好。