menu
refresh
shufu
这是一个前端开发记录Debug过程和杂谈的博客
flex左右布局后子级设置高度自适应
access_time
brush 151个字
whatshot 41 ℃

常见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;}

#如无特别声明,该文章均为 shufu 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2020 年 04 月 04 日


account_circle
email
explore


DreamCat

主题名称:DreamCat | 版本:X1.6-20201226

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld

鸣谢:学神之女

鸣谢:学神之女