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

Result

Add child

{{$index + 1}} ✖
order flex-grow flex-shrink flex-basis align-self {{value}}

源代码来自：https://github.com/imjustd/flexbox-playground 。