html - 以 Flex 为中心的盒子内容不再有效

Question

我有几个包含图像和文本的框，我希望即使图像的尺寸略有不同，内容也能正确对齐。我已经有了，所以它看起来(并且应该看起来)像那样

但后来我不得不在其中一个盒子的 wrapper 上输入一个标签，整个东西都崩溃了，所以它看起来像那样

整个事情可以在https://codepen.io/daiaiai/pen/MWgoqdB看到

所以它的基本设置是这样的:

<div class="row wrapthat category_marks">
<div class="col col-6er">
<a href="#">
  <div class="marken_box">
    <div class="marken_icons">
      <img src="https://i.postimg.cc/hzhXhf3X/Abarth.png">
      <p><strong>Abarth</strong><br>Erfahren Sie mehr über Ihre Vorteile.</p>
    </div>
  </div>
</a> 
</div>       <!--- And all the other boxes ...following that structure -->
   </div>

CSS 看起来很像

body{
  background:red;
  max-width: 1140px;
  margin:100px auto;

}.category_marks {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-6er {
    -ms-flex: 0 0 16.66666666666667%;
    flex: 0 0 16.66666666666667%;
    max-width: 16.66666666666667%;
}
.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.marken_box {
    background: white;
    box-shadow: 3px 3px 87px -35px rgba(85,95,85,0.6);
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    min-height: 255px;
    border-radius: 5px;
}
div.marken_icons {
    background: white;
    border-bottom: 1px solid black;
    width: 100%;
    margin: 0;
    min-height: 110px;
    justify-content: center;
    align-content: center;
    display: flex;
}
img.marken_icons, .marken_icons img {
    width: 60%;
    margin: 0 10%;
    width: 60%;
    margin: 0 20%;
    padding: 10px 0;
    margin: auto 20%;
}
.category_marks a p {
    margin-top: 20px;
    color: rgb(87,87,87);
      font-size: calc(14px * 1.2);
}

我在那里做错了什么，我该如何解决？

Answer 1

使用 flex-wrap 属性将 div 正确地包裹到位。

至于图像的对齐方式，我只是使用 align-items 属性在 flex-end 上对齐它们。 同时在 anchor 标签上定义 display:flex 使所有的卡片高度相同。让我知道这是否有效

body{
  background:red;
  max-width: 1140px;
  margin:100px auto;

}.category_marks {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-6er {
    -ms-flex: 0 0 16.66666666666667%;
    flex: 0 0 16.66666666666667%;
    max-width: 16.66666666666667%;
}
.col {
    margin: 5px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
}
.marken_box {
    background: white;
    box-shadow: 3px 3px 87px -35px rgba(85,95,85,0.6);
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    min-height: 255px;
    border-radius: 5px;
    display: flex;
    align-items: flex-end;
}
div.marken_icons {
    background: white;
    border-bottom: 1px solid black;
    width: 100%;
    margin: 0;
    min-height: 110px;
    justify-content: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;  
}
img.marken_icons, .marken_icons img {
    //width: 60%;
    margin: 0 10%;
    //width: 60%;
    margin: 0 20%;
    padding: 10px 0;
    margin: auto 20%;    
}
.category_marks a p {
    margin-top: 20px;
    color: rgb(87,87,87);
    font-size: calc(14px * 1.2);  
}
a {
  display: flex;
}