CSS Flexbox 可视化演示
flex-direction 属性
控制Flex项目的主轴方向
row（默认）
display: flex; flex-direction: row;
row-reverse
display: flex; flex-direction: row-reverse;
column
display: flex; flex-direction: column;
column-reverse
display: flex; flex-direction: column-reverse;
↔️ justify-content 属性
控制Flex项目在主轴上的对齐方式
flex-start（默认）
justify-content: flex-start;
flex-end
justify-content: flex-end;
center
justify-content: center;
space-between
justify-content: space-between;
space-around
justify-content: space-around;
space-evenly
justify-content: space-evenly;
↕️ align-items 属性
控制Flex项目在交叉轴上的对齐方式
stretch（默认）
align-items: stretch;
flex-start
align-items: flex-start;
flex-end
align-items: flex-end;
center
align-items: center;
baseline
align-items: baseline;
flex-wrap 属性
控制Flex项目是否换行
nowrap（默认）
flex-wrap: nowrap;
Item1
Item2
Item3
Item4
Item5
Item6
wrap
flex-wrap: wrap;
Item1
Item2
Item3
Item4
Item5
Item6
wrap-reverse
flex-wrap: wrap-reverse;
Item1
Item2
Item3
Item4
Item5
Item6
flex-grow 属性
控制Flex项目的放大比例
flex-grow: 0（默认）
flex-grow: 0;
flex-grow: 1
flex-grow: 1;
flex-grow: 2
flex-grow: 2;
order 属性
控制Flex项目的排列顺序
默认顺序
order: 0;
自定义顺序
order: 1, 2, 3, 4;
反向顺序
order: 4, 3, 2, 1;
align-self 属性
控制单个Flex项目的对齐方式
align-self: flex-start
align-self: flex-start;
align-self: flex-end
align-self: flex-end;
align-self: center
align-self: center;
实际布局示例
Flexbox在实际项目中的应用
导航栏布局
display: flex; justify-content: space-between; align-items: center;
卡片网格布局
display: flex; flex-wrap: wrap; gap: 15px;
侧边栏布局
display: flex; sidebar: flex: 0 0 200px; main: flex: 1;
响应式布局
flex: 1 1 100%; @media (min-width: 768px) { flex: 1 1 45%; } @media (min-width: 1024px) { flex: 1 1 30%; }
响应式项目1
响应式项目2
响应式项目3
响应式项目4
响应式项目5
响应式项目6
总结
Flexbox是现代CSS布局的强大工具，通过合理使用这些属性，可以轻松创建响应式、自适应的页面布局。
记住主轴和交叉轴的概念，以及各种属性对布局的影响。