Flexbox Playground

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

align-items

flex-start
flex-end
center
space-between
space-around

align-content

stretch
flex-start
flex-end
center
space-between
space-around

Result 预览 +Add CHILD

1
order:
flex-grow:
flex-shrink:
flex-basis:
align-self:
2
order:
flex-grow:
flex-shrink:
flex-basis:
align-self:
3
order:
flex-grow:
flex-shrink:
flex-basis:
align-self:
4
order:
flex-grow:
flex-shrink:
flex-basis:
align-self:

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会