display:flex; /* 在容器上定义Flexbox布局*/ display:inline-flex; /* 在行内元素上定义Flexbox布局*/ flex-direction: row | row-reverse | column | column-reverse; /* 决定了主轴的方向（即项目排序方向）*/ flex-wrap: nowrap | wrap | wrap-reverse; /* 定义项目是否换行*/ flex-flow:; /* 表示flex-direction属性和flex-wrap属性的简写形式*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*决定主轴对齐方式*/ align-items: flex-start | flex-end | center | baseline | stretch; /*决定交叉轴对齐方式*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*定义了多跟轴线在交叉轴上的对齐方式*/
Flexbox布局模式适用于小到中等规模的布局的设计，常常可以替代复杂的float和position属性来实现同样的页面布局。在响应式设计的场合下，Flexbox布局能够更好地对页面进行适应，并且可以省去整个css文件中大量媒体查询的代码。