我正在处理一个带有3个Flexbox容器的Flexbox布局,其中一个容器内部有嵌套的Flexbox布局。带有嵌套Flexbox的Flexbox布局似乎过早地打包/断开,即使有空间可供其占用。我在父元素上尝试了许多不同的Flex-grow和Flex-shrink组合,我觉得自己快疯了。但我还是觉得有一个简单的解决办法。
当浏览器的大小是~ 1600 px时,它的工作原理正是我想要的,但一旦它的大小变小,它似乎打破了布局和 Package ,即使有可用的空间,它继续保持它的布局。
如果我更改父对象上的弹性增长设置,但弹性框不再对齐,我可以实现我想要的效果。如何保持对齐和弹性框增长?
布局正确,但过早中断示例https://jsfiddle.net/9g5dam6f/
生长正常但未正确对齐示例https://jsfiddle.net/bctgv7ah/
下面是过早中断但正确对齐的代码:
.content {
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-info {
margin: 0 0px 20px;
box-sizing: border-box;
}
.columns {
display: flex;
padding: 1.2em;
flex-wrap: wrap;
box-sizing: border-box;
}
.col-45-info {
width: 40%;
background-color: hotpink;
}
.col-26-info {
width: 26.65%;
justify-content: end;
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: wrap;
background-color: purple;
}
.col-33-info {
width: 33.33%;
background-color: pink;
}
.col-50-info {
width: 51%;
display: flex;
flex-wrap: wrap;
gap: 2em;
background-color: grey;
opacity: 50%;
}
h1 {
font-family: Helvetica, sans-serif;
font-size: 21px;
text-align: left;
}
.columns h1 {
margin-bottom: 1rem;
}
.columns p {
font-size: 16px;
font-family: Helvetica, sans-serif;
line-height: 1.3;
}
li {
text-align: left;
font-size: 16px;
font-family: Helvetica, sans-serif;
list-style-type: none;
line-height: 1.17;
}
.columns a {
text-decoration: underline;
font-family: Helvetica, sans-serif;
color: black;
font-size: 16px;
width: 100%;
}
<div class="content">
<div class="columns">
<div class="col-info col-33-info">
<h1> TRAILBLAZER </h1>
<li>Art Direction </li>
<li>Creative Concept</li>
<li> Graphic Design </li>
<li> Web Design </li>
<li> Web Development </li>
<li> Visual Effects </li>
</div>
<div class="col-info col-45-info">
<p> Art direction and campaign for design collaboration between international brands Marimekko, Matty Bovan, Nomen Nescio, palmer//harding, Per Götesson, Zandra Rhodes, final-year fashion students at Beckmans College of Design and Stockholm Fashion
Week. <br> <br> The story of the Trailblazer is the story of the innovator. Inspired by the strong artistic approach of all brand and designers, we created a creative concept inspired by 90’s anime and manga that could fit each collections individuality,
and where each collection could be the hero in their own world, where they blaze a trail for others to walk on. <br> <br> The final develiberables included: A concept film, campaign photos, lookbook photos, website design and development, digital
and some material.
</p>
</div>
<div class="col-info col-26-info">
<div class="col col-50-info">
<li> <a target="_blank" href="https://trailblazer.beckmans.college/"> Visit the web </a> <br>
<a target="_blank" href="https://vimeo.com/510337626"> Watch the film </a> <br>
<a target="_blank" href="https://trailblazer.beckmans.college/"> ELLE Magazine </a> <br>
<a target="_blank" href="https://trailblazer.beckmans.college/"> ArtsThread </a>
</li>
</div>
<div class="col-50-info">
<li class="col" style="margin:0;">
Date
<br> Team </li>
<li class="col"> 2020 <br> Almir Jasarevic <br> Astrid Askert <br> Elisabet Lindén <br> Saba Mehrabanfar <br> Sofia Hjortberg
</li>
</div>
</div>
</div>
</div>
1条答案
按热度按时间5fjcxozz1#
我通过使用
justify:space-between
并为兄弟元素设置固定宽度来使它工作!https://jsfiddle.net/yrwh062z/2/