问题：
相同高度的弹性物品
百里修真
我的Flex项目有问题我尝试创建相同高度的Flex容器，但它不起作用，现在有人知道我尝试使用Flex:1和其他属性时会出现什么问题，但它不起作用这里是我的示例代码：
样本布局
.recent-wrapper.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
padding: 50px 50px 40px 50px;
}
.post-image {
width: 100%;
height: 250px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: #999;
}
article.popular_posts {
min-width: 250px;
margin-bottom: 10px;
display: inline-block;
position: relative;
margin: 20px 1%;
width: 100%;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
flex: 1;
}
.grid-date {
background-color: rgb(237, 43, 71);
color: #fff;
font-size: 18px;
font-weight: 800;
min-height: 48px;
min-width: 48px;
padding: 5px 10px;
position: absolute;
right: 15px;
text-align: center;
text-transform: uppercase;
top: 0;
}
.post-container {
width: 100%;
padding: 5px 10px 10px 10px;
margin-bottom: 5px;
text-align: left;
}<div class="recent-wrapper container">
<article class="popular_posts">
<div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/f-16-min.jpg');">
</div>
<div class="grid-date">
<span class="day"> 07</span>
<span class="month"> Oct</span>
</div>
<div class="post-container">
<h2> Ф-16 Блок 70/72 “ПОСЛЕДЊИ ФАЛКОН” </h2>
<p>Захваљујући уговорима о куповини вишенаменског борбеног авиона Ф-16”Figthing Falcon” БЛОК 70/72 који су са његовим призвођачем, америчком компанијом “Локид Мартин” потписали</p>
<div class="submit-btn">
<a href="https://geostrateg.com/naoruzanje/f-16-blok-70-72-poslednji-falkon/" class="read-more">Сазнај Више</a>
</div>
</div>
</article>
<article class="popular_posts">
<div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/win-azur-featured.jpeg');">
</div>
<div class="grid-date">
<span class="day"> 07</span>
<span class="month"> Oct</span>
</div>
<div class="post-container">
<h2> СТИЖЕ АЖУРУРИРАЊЕ за “WINDOWS 10” </h2>
<p>Добре вести! Највећа светска корпорација “IT” технологије “Мicrosoft” са седиште у граду Редмонд у америчкој савезној држави Вашингтон, најавла је</p>
<div class="submit-btn">
<a href="https://geostrateg.com/nauka/stize-azururiranje-za-windows-10/" class="read-more">Сазнај Више</a>
</div>
</div>
</article>
<article class="popular_posts">
<div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/09/9_114950d1-min.jpg');">
</div>
<div class="grid-date">
<span class="day"> 30</span>
<span class="month"> Sep</span>
</div>
<div class="post-container">
<h2> РУСКИ МОРСКИ ДУХ </h2>
<p>Гоестратег први пут у рубрици “Војска и наоружање” посвећује пажњу једном систему морнарице. У питању је нова руска “невидљива и</p>
<div class="submit-btn">
<a href="https://geostrateg.com/naoruzanje/ruski-morski-duh/" class="read-more">Сазнај Више</a>
</div>
</div>
</article>
</div>共有1个答案
谢翰学
问题是您使用的是align items:center，它试图垂直对齐3篇文章。由于元素的高度不相等（post containerheight differences），它们在容器的中心垂直对齐，但高度不“相等”。
移除对齐项目：居中，就可以了。
如果要水平对齐，请使用justify content:center。请记住，方向（行/列）会更改XY轴。在这里阅读更多-
请参阅下面的代码片段或jsFiddle中的结果
.recent-wrapper.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
/*align-items: center; */
padding: 50px 50px 40px 50px;
}
.post-image {
width: 100%;
height: 250px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: #999;
}
article.popular_posts {
min-width: 250px;
margin-bottom: 10px;
display: inline-block;
position: relative;
margin: 20px 1%;
width: 100%;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
flex: 1;
}
.grid-date {
background-color: rgb(237, 43, 71);
color: #fff;
font-size: 18px;
font-weight: 800;
min-height: 48px;
min-width: 48px;
padding: 5px 10px;
position: absolute;
right: 15px;
text-align: center;
text-transform: uppercase;
top: 0;
}
.post-container {
width: 100%;
padding: 5px 10px 10px 10px;
margin-bottom: 5px;
text-align: left;
}<div class="recent-wrapper container">
<article class="popular_posts">
<div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/f-16-min.jpg');">
</div>
<div class="grid-date">
<span class="day"> 07</span>
<span class="month"> Oct</span>
</div>
<div class="post-container">
<h2> Ф-16 Блок 70/72 “ПОСЛЕДЊИ ФАЛКОН” </h2>
<p>Захваљујући уговорима о куповини вишенаменског борбеног авиона Ф-16”Figthing Falcon” БЛОК 70/72 који су са његовим призвођачем, америчком компанијом “Локид Мартин” потписали</p>
<div class="submit-btn">
<a href="https://geostrateg.com/naoruzanje/f-16-blok-70-72-poslednji-falkon/" class="read-more">Сазнај Више</a>
</div>
</div>
</article>
<article class="popular_posts">
<div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/10/win-azur-featured.jpeg');">
</div>
<div class="grid-date">
<span class="day"> 07</span>
<span class="month"> Oct</span>
</div>
<div class="post-container">
<h2> СТИЖЕ АЖУРУРИРАЊЕ за “WINDOWS 10” </h2>
<p>Добре вести! Највећа светска корпорација “IT” технологије “Мicrosoft” са седиште у граду Редмонд у америчкој савезној држави Вашингтон, најавла је</p>
<div class="submit-btn">
<a href="https://geostrateg.com/nauka/stize-azururiranje-za-windows-10/" class="read-more">Сазнај Више</a>
</div>
</div>
</article>
<article class="popular_posts">
<div class="post-image" style="background-image: url('https://geostrateg.com/wp-content/uploads/2018/09/9_114950d1-min.jpg');">
</div>
<div class="grid-date">
<span class="day"> 30</span>
<span class="month"> Sep</span>
</div>
<div class="post-container">
<h2> РУСКИ МОРСКИ ДУХ </h2>
<p>Гоестратег први пут у рубрици “Војска и наоружање” посвећује пажњу једном систему морнарице. У питању је нова руска “невидљива и</p>
<div class="submit-btn">
<a href="https://geostrateg.com/naoruzanje/ruski-morski-duh/" class="read-more">Сазнај Више</a>
</div>
</div>
</article>
</div>
类似资料：
-
问题内容： 我想知道是否有可能使弹性项目与同一容器中的较大弹性项目水平对齐。使用CSS浮点数将很容易实现，但是我无法通过flex项来完成它。 网格布局 的CSS 问题答案： 您可以通过嵌套flex容器来实现布局。 HTML CSS
-
我正在尝试使用flex Box创建滑块。我的想法是创建一个父容器，并使滑块水平溢出。然后将父元素设置为无溢出，这样溢出的子元素就被隐藏了，我们可以使用滚动条查看其他子元素。 下图显示了我现在得到的输出。我试图使三个div具有父容器的全宽。这样，当红色div占据父div的空间时，只有红色div可见。要查看其余div，必须向右滚动。 我尝试过将宽度设置为100%，但似乎不起作用。
-
问题内容： 我有2个div并排。我不知道它们的高度，它根据内容而改变。有没有一种方法可以确保它们始终保持相同的高度，即使其中一个拉伸时也只能使用CSS？ 我做了一个小提琴来展示。我希望红色和蓝色的div高度相同… 这是CSS： 问题答案： 您可以尝试使用float来代替使用float。但是，您可能会发现某些较旧的浏览器不了解此规则。见下文：
-
问题内容： 在下面的代码中，我希望带有“ y”的div将div的高度与3个“ x”相匹配。 需要注意的是内部div是浮动的。 问题答案： 如果您不反对使用jQuery，可以使用EqualHeight，它应该做您想要的
-
问题内容： 我目前正在使用Bootstrap中的Cards。 根据文字标题，我将获得不同高度的卡片，并希望与最高卡片具有相同的高度。 我不介意使用JS，我实际上认为这可能是解决问题的最佳方法。 我尝试过使用CSS之外的其他解决方案，例如使用flexbox。 作为一个动态示例，呈现的HTML是一个简单的示例： 问题答案： 该引导4列已经使用了Flexbox的，使他们 都 在 同一高度 。只需 在卡上
-
我有一个javafx GridPane，当我调整阶段大小时，它会调整自己的大小以适应阶段的大小。我希望gridpane的高度与gridpane的宽度相匹配，并因此将大小调整为尽可能大的大小，同时保持这种约束。 我不得不在GridPane的父级中添加更多的元素。我发现添加的元素完全没有正常的行为，并且相互重叠。 当然，当我移除重写方法时，它们不再重叠，但当我调整舞台大小时，网格窗格并没有保持一个完美