Flex:自然换行的多列页脚 | 星雨笔录
实现可自动折行的多栏页脚。
核心: 页脚列容器用 flex-wrap,每列给最小宽度,让窄屏自然断行。
最小示例:
.footer-cols { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-cols > section { flex: 1 1 180px; }
学完能做: 实现可自动折行的多栏页脚。
实现可自动折行的多栏页脚。
核心: 页脚列容器用 flex-wrap,每列给最小宽度,让窄屏自然断行。
最小示例:
.footer-cols { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-cols > section { flex: 1 1 180px; }
学完能做: 实现可自动折行的多栏页脚。