CSS3 Flexbox 演示

子元素宽度

width: {{children_width}}%

父级 Flex 属性 – flex container

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

stretch

flex-start

flex-end

center

baseline

align-content

stretch

flex-start

flex-end

center

space-between

space-around

* The default property values are highlighed.

子元素 Flex 属性 – flex items

子元素 Flex 属性应用在子元素上，每个子元素分别应用。请查看演示部分，并修改其中的一些属性。鼠标指针悬停或触摸字段可以查看属性名称。

演示

Add child

{{$index + 1}} ✖

order

flex-grow

flex-shrink

flex-basis

align-self

{{value}}

源代码来自：https://github.com/imjustd/flexbox-playground 。因为部分资源文件无法打开，所以修改了地址，重新生成了页面

其他CSS3 属性演示：