CSS Flex 属性交互式演示
实时调整 Flex 属性，即刻查看效果
容器属性
项目属性
Flex 容器属性
display
flex
inline-flex
flex-direction
row (默认)
row-reverse
column
column-reverse
flex-wrap
nowrap (默认)
wrap
wrap-reverse
justify-content
flex-start (默认)
flex-end
center
space-between
space-around
space-evenly
align-items
stretch (默认)
flex-start
flex-end
center
baseline
align-content
stretch (默认)
flex-start
flex-end
center
space-between
space-around
gap
10px
项目数量
3
重置容器属性
1
2
3
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}
Flex 项目属性
点击项目进行选择，然后调整其属性
order
0
flex-grow
0
flex-shrink
1
flex-basis
auto (默认)
0
50px
100px
200px
25%
50%
align-self
auto (默认)
flex-start
flex-end
center
baseline
stretch
重置项目属性
1
2
3
请选择一个项目来查看其属性