css - 相同高度的弹性项目
问题描述
我有问题 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”&nbsp; БЛОК 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>
解决方案
问题是你正在使用align-items:center
它试图articles
垂直对齐你的 3 中心。并且由于您的元素的高度不相等(post-container
高度不同),它们在容器的中心垂直对齐,但它们的高度没有“均衡”。
删除align-items:center
,你会没事的。
如果要水平对齐,请使用justify-content:center
. 请记住,方向(行/列)会改变 XY 轴。在此处阅读更多信息-> align-items / justify-content
请参阅下面的片段或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”&nbsp; БЛОК 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>
推荐阅读
- python - 为什么Sconstruct中有一些python语句没有执行?
- c++ - 破坏局部静态对象
- linux - 行数 - 如何排除目录和图像?
- parent-child - Cloud Spanner 子表可以与父表具有相同的主键吗?
- ffmpeg - ffmpeg sbs 3d mkv转3d烘焙成2d视频
- c# - 在数据网格视图 C# 中打印 XML 数据
- amazon-web-services - HIVE_BAD_DATA:parquet 中字段 id 的 BINARY 类型与表模式中定义的 int 类型不兼容
- gitlab - 如何从 Redmine 创建 Gitlab 问题
- python - 相等的更少和更大的列表python
- python - 我的代码运行但没有返回输出,我需要帮助吗?