🎨 CSS 布局详解
Flexbox、Grid、BFC、居中方案的可交互演示
1. Flexbox 弹性布局
flex-direction
row
row-reverse
column
column-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
flex-wrap
nowrap
wrap
wrap-reverse
gap
10px
1
2
3
4
2. Grid 网格布局
grid-template-columns
repeat(3, 1fr)
200px 1fr 1fr
auto-fit
1fr 2fr 1fr
grid-template-rows
auto
100px auto 100px
repeat(2, 1fr)
gap
10px
justify-items
stretch
start
end
center
1
2
3
4
5
6
3. 居中方案大全
居中方案
Flexbox (推荐)
Grid
Absolute + Transform
Absolute + Margin
Table-cell
Line-height (单行文本)
居中内容
4. BFC (块级格式化上下文)
BFC 触发方式
无 BFC (默认)
overflow: hidden
display: flow-root
float: left
position: absolute
这是内容区域。当没有 BFC 时,文字会围绕浮动元素。触发 BFC 后,内容会形成独立的格式化上下文,不会被浮动元素影响。