Flex 布局真香 —— 告别浮动布局的烦恼

之前做页面布局一直用 float 浮动，清除浮动麻烦不说，稍微复杂一点的布局就容易出问题。直到学了 Flex 弹性布局，我才真正感受到什么叫 "布局自由"。
Flex 的核心就是容器和项目。给父元素设display: flex，它就变成了弹性容器，里面的子元素自动变成弹性项目。
css
/* 父容器 /
.flex-container {
display: flex;
justify-content: center; / 主轴水平居中 /
align-items: center; / 交叉轴垂直居中 */
height: 300px;
border: 1px solid #ccc;
}

/* 子项目 */
.flex-item {
width: 100px;
height: 100px;
background: #42b983;
}
通过justify-content控制主轴对齐，align-items控制交叉轴对齐，以前要写好几行浮动代码才能实现的水平垂直居中，现在两三行就搞定了。
我用 Flex 重写了之前的导航栏布局，代码量减少了一半，而且不用再担心高度塌陷的问题。
css
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 0 20px;
background: #333;
color: #fff;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
特别是做响应式布局的时候，配合flex-wrap: wrap，元素会自动换行，适配不同屏幕尺寸特别方便。
当然 Flex 也不是万能的，一维布局它最强，二维复杂布局还是得靠 Grid。不过对于现阶段的我来说，Flex 已经能解决绝大多数布局场景了。只能说，Flex 布局，谁用谁知道。