停止flex项目从增长到适合容器并保持其纵横比

时间:2018-05-16 11:26:46

标签: html css flexbox

我试图了解Flexbox如何更好地工作。在这个例子中,如果你增加.next-news-articles的margin-bottom,'police'div增加它的大小以适应容器,这也破坏了它的3:2宽高比,但橙色div保持相同的大小同时保持6:1的宽高比。

如何阻止警察div增长以适应其父容器的高度?添加flex增长0并不会阻止它增长。 .next-news-articles有2%的边距底部可以将它们分开,但我宁愿在其父级(.smaller-index-news-articles-wrap)上使用justify-content:space-between,但是这增加了警察形象的大小,因为它增长以适应容器。如何解决这个问题?

另外,为什么在将flex shrink设置为0时大小最大,因为有2个子项目可以共享该区域。

非常感谢详细解释。谢谢你的帮助

.news-tc-top-wrap {
    width: 100%;
    height: auto;
    display: flex;
  background: pink;
}
.first-news-article-wrap {
    margin-right: 2%;
    width: 45%;
    flex-basis: 45%;
    display: flex;
    flex-direction: column;
}
.first-news-article {
    height: auto;
    background-position: center center !important;
    background-size: cover !important;
    width: 100%;
    flex-basis: 100%;
    padding-bottom: 66.666%;
    margin-right: 0;
    flex-grow: 0;
}
.first-news-article-description {
    overflow: hidden;
    width: 100%;
    background: #375db5;
    padding-bottom: 25%;
    position: relative;
    background: orange;
}
.first-news-article-description-absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 15px;
}
.smaller-index-news-articles-wrap {
    width: 53%;
    flex-basis: 53%;
    display: flex;
    flex-direction: column;
 /* justify-content: space-between; */
}
.next-news-articles {
    height: auto;
    float: left;
    margin-bottom: 2%; /* setting as 0 destroys the police image's aspect ratio */
    position: relative;
  overflow: hidden;
}
.next-news-article-image {
    width: 36.375%;
    height: auto;
    padding-bottom: 24.25%;
    float: left;
    background-size: cover;
    background-position: center center;
}
.next-news-article-description {
    background: #375db5;
    float: left;
    width: 63.667%;
    height: 100%;
    position: absolute;
    right: 0;
    padding: 15px;
    overflow: hidden;
}
<div class="news-tc-top-wrap">
    <div class="first-news-article-wrap">
    <div class="first-news-article" style="background-image: url(https://cml.sad.ukrd.com/image/527245-800x800.jpg)"></div>
<div class="first-news-article-description">
    <div class="first-news-article-description-absolute">
            <h2 style=""><a href="/news/local-news/17324/the-players-tiger-woods-fires-72-as-phil-mickelson-slumps-to-seven-over/">The Players: Tiger Woods fires 72 as Phil Mickelson slumps to seven over</a></h2>
            <span><a href="/news/">Mix 96 News</a></span>
    </div>
        </div>
        </div>
<div class="smaller-index-news-articles-wrap">
  <div class="next-news-articles">
    <div class="next-news-article-image" style="background-image: url(http://mix96.matt.hicks/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F05%2F300x225%2Fskysports-dustin-johnson-golf_4305787.jpg%3F20180510151451);"></div>
    <div class="next-news-article-description">
        <h3><a href="/news/local-news/17325/the-players-world-no-1-dustin-johnson-in-six-way-tie-for-lead/">The Players: World No 1 Dustin Johnson in six-way tie for lead</a></h3>
        <span><a href="/news/">Mix 96 News</a></span>
    </div>
</div>                                                                            <div class="next-news-articles">
    <div class="next-news-article-image" style="background-image: url(http://mix96.matt.hicks/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F03%2F300x225%2Fskysports-gareth-southgate_4262848.jpg%3F20180323102711);"></div>
    <div class="next-news-article-description">
        <h3><a href="/news/local-news/17322/gareth-southgates-england-world-cup-squad-to-be-announced-on-may-16/">Gareth Southgate's England World Cup squad to be announced on May 16</a></h3>
        <span><a href="/news/">Mix 96 News</a></span>
    </div>
</div>                                                                             <div class="next-news-articles">
    <div class="next-news-article-image" style="background-image: url(http://mix96.matt.hicks/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F05%2F300x225%2Fjose-mourinho-man-utd-premier-league_4306289.jpg%3F20180510233715);"></div>
    <div class="next-news-article-description">
        <h3><a href="/news/local-news/17326/jose-mourinho-defends-manchester-uniteds-under-par-performance-in-draw-at-west-ham/">Jose Mourinho defends Manchester United's under-par performance in draw at West Ham</a></h3>
        <span><a href="/news/">Mix 96 News</a></span>
    </div>
</div>
    </div>
</div>

0 个答案:

没有答案