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

Question

我的 3 个容器在 900px 及以下没问题，在这个宽度下使用 900px 的规则，即 flex-direction:column ，所以那里没有发布。在我的全尺寸浏览器（1366 像素）中，容器的高度/宽度也相同。 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, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 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;
}
    }

Answer 1

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

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

Different sized flex-containers when not at full-sized browser

html

css

column-width

width

flexbox