Flex 基础语法（一）

任何一个容器都可以指定为Flex布局。

.box{ display: flex; } 

行内元素也可以使用Flex布局。

.box{ display: inline-flex; } 

Webkit内核的浏览器，必须加上

-webkit

前缀。

.box{ display: -webkit-flex; /* Safari */ display: flex; } 

注意，设为Flex布局以后，子元素的

float

、

clear

和

vertical-align

属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

以下6个属性设置在容器上。

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