复习 CSS Flex 和 Grid 布局
💡
原文中文，约7900字，阅读约需19分钟。
📝
内容提要
现代 CSS 提供了 Flex 和 Grid 两种布局方式，简化了布局过程。Flex 适用于一维布局，支持换行和居中；Grid 则用于二维布局，便于设置行列。Tailwind 封装了常用布局类，方便开发者使用。
🎯
关键要点
- 现代 CSS 提供了 Flex 和 Grid 两种布局方式，简化了布局过程。
- Flex 适用于一维布局，支持换行和居中。
- Grid 用于二维布局，便于设置行列。
- Flex 布局中的子元素可以根据设置的宽度自适应调整。
- Flex 支持换行，通过设置 flex-wrap: wrap; 实现。
- Flexbox 的主轴和交叉轴概念帮助理解元素排列。
- Flex 提供了方便的居中布局方法，使用 justify-content 和 align-items。
- Grid 布局通过 grid-template-columns 和 grid-template-rows 设置行列。
- Grid 允许通过命名网格和网格跨越设计页面元素。
- Tailwind 封装了常用的 Flex 和 Grid API，方便开发者使用。
➡️
