Flexbox布局做不出来?换个思路就通了

网站建设 · 超级管理员

Flexbox看了好多教程,真上手的时候还是一脸懵。其实不用把所有属性都记住,抓住几个核心用法就够了。

垂直居中是最常见的场景:`display:flex`加上`justify-content:center`和`align-items:center`,一行代码搞定。比起以前用position加负margin,不知道简单到哪里去了。

导航菜单用Flexbox做也很舒服。`justify-content:space-between`让左右两边的元素靠边,中间的元素自动均分间距。不用算margin,不用float。

还有一种场景是卡片列表,文字长度不一样导致高度不统一。给父容器加`display:flex`,子元素加`align-items:stretch`,高度就自动对齐了。

廷云信息的前端团队每天都在用Flexbox,有什么问题可以直接问。