linong
← Demo 归档

Flex 垂直布局 · 基础 column

仅 display:flex + flex-direction:column。博客系列起点，尚未做两端对齐或撑开。

Flex 垂直布局 · 基础 column
Web CSS 博客配套 legacy CSS 博客配套 Flex
新窗口打开 原路径 /static/html/flex-direction-column-sf.html
在线预览
全屏打开

简介

配套文章《基于 Flex 实现两端对齐垂直布局》的基础版：header / section / footer 纵向排列，容器用 min-height 模拟一屏。

本页尚未加 justify-content 或 flex: 1，后续 .1 / .2 / .3 在此之上逐步加策略。

与系列其它页的差异

文件关键点
本页只有 column，不做空间分配
.1#app { justify-content: space-between }
.2section { flex: 1; display:flex; align-items:center }
.3内容上下各插一块 flex: 1 1 20px 空白

如何测试验证

  1. 调浏览器高度，看头/内容/底是否仍贴在一起（本页会）。
  2. 打开 .1 对比两端对齐效果。
  3. 对照博客 sf-1190000037452855。

相关规范与文档

相关文章