Flexbox 嵌套元素
Posted
技术标签:
【中文标题】Flexbox 嵌套元素【英文标题】:Flexbox nested elements 【发布时间】:2017-05-24 03:02:34 【问题描述】:我正在尝试使用 flexbox 嵌套一些元素以获得此结果:
有人知道如何实现这个结果吗?
【问题讨论】:
欢迎来到 SO。请在代码中添加一个起点,以便正确快速地回答您的问题。另请参阅***.com/help/mcve "有人知道如何实现这个结果吗?"是的,使用 html 和 css。尝试编写代码。 【参考方案1】:经过几次尝试,我想我找到了我想要的东西。
body
background: skyblue;
a
text-decoration: none;
.wrapper
margin: 2%;
.articles
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.article-card
background-color: #FFF;
box-shadow: 0 4px 4px -4px rg;
.article-card--big
width: calc(50% - 30px);
margin-right: 30px;
float: left;
.article-card--flex
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 50%;
.article-card--landscape
width: calc(50% - 30px);
float: left;
margin-right: 30px;
margin-bottom: 30px;
.article-card--landscape:nth-child(3), .article-card--landscape:nth-child(4)
margin-bottom: 0;
.card-content
display: block;
padding: 15px;
.card-img
display: block;
background: #ededed;
position: relative;
overflow: hidden;
.card-img:before
display: block;
content: "";
width: 100%;
padding-top: 70%;
.card-img img
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto 0;
width: 100%;
height: auto;
img
max-width: 100%;
height: auto;
<div class="wrapper">
<section class="articles articles-category">
<article class="article-card article-card--big">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" > </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<div class="article-card--flex">
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" > </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" > </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" > </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" > </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
</div>
</section>
</div>
【讨论】:
以上是关于Flexbox 嵌套元素的主要内容,如果未能解决你的问题,请参考以下文章