flex左右布局后子级设置高度自适应

常见flex左右布局

<main>
 <article>
 </article>
 <aside>
 </aside>
</main>

这种左右布局在常见项目中常用。当我们使用

main{display:flex;}
article{width:100%;margin-right:10px;}
aside{width:300px;flex-shrink:0;}

这样写后 布局就是常见的新闻、文章类型布局。
但是这样写右侧的aside高度会随着article的高度。如果article的高度有3000 aside的高度也随之有3000
但是我们的业务场景一般是右侧的导航会跟随,都会用js(scrollFix)来写滚动跟随逻辑。但是在aside的高度和article的高度一样的情况下。scrollFix的逻辑会失效。这时候如果使用aside{height:auto}是无效的,
我们需要设置aside{align-self:flex-start}来使aside重新对齐一下

main{display:flex;}
article{width:100%;margin-right:10px;}
aside{width:300px;flex-shrink:0;align-self:flex-start;}
发表新评论