Flexbox看了好多教程,真上手的时候还是一脸懵。其实不用把所有属性都记住,抓住几个核心用法就够了。
垂直居中是最常见的场景:`display:flex`加上`justify-content:center`和`align-items:center`,一行代码搞定。比起以前用position加负margin,不知道简单到哪里去了。
导航菜单用Flexbox做也很舒服。`justify-content:space-between`让左右两边的元素靠边,中间的元素自动均分间距。不用算margin,不用float。
还有一种场景是卡片列表,文字长度不一样导致高度不统一。给父容器加`display:flex`,子元素加`align-items:stretch`,高度就自动对齐了。
廷云信息的前端团队每天都在用Flexbox,有什么问题可以直接问。