Flex弹性布局总结

Flex弹性布局总结

一、在容器box上设置的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

二、在item项目上设置的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

一、在容器box上设置的属性

前提：display:flex;或display:inline-flex;

注意：容器设为Flex布局以后，子元素item的float、clear和vertical-align属性将失效。

1. item项目的排列方向：flex-direction

flex-direction:（有以下属性值）
row    从左往右
row-reverse    从右往左
column    从上往下
column