CSS3 放飞自我2——flex布局

今天来谈论下弹性盒模型flex

.box{

　　display:flex;

}

行内元素使用flex

.box{
    display:inline-flex;      
}

在这之前，先讲一下主轴和交叉轴。

主轴就是容器的X方向，交叉轴就是容器的Y方向。

容器的属性

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

 

flex-direction:主轴的方向

row:默认，主轴水平，从左往右。

row-reverse:主轴水平，从右往左。

column:主轴垂直，从上往下。

column-reverse:主轴垂直，从下往上。

 

flex-wrap:决定如何换行。

nowrap:默认，不换行。

wrap:换行，从上往下。

wrap-reverse:换行，从下往上。

 

flex-row:flex-direction+flex-wrap。

默认：flex-flow:row nowrap.

 

justify-content:定义项目在主轴上的对齐方式

flex-start:默认，左对齐。

flex-end:右对齐。

center:居中。

space-between:两端对齐，项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等。

 

align-items:定义项目在交叉轴上如何对齐。

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

baseline:项目的第一行文字的基线对齐。

stretch:默认值，如果项目未设置高度或是这城auto，将沾满整个容器的高度。

 

align-content:多行（多根主轴的）的情况下的对齐方式。如果只有一根轴线，则该属性不起作用。

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch:默认值，轴线沾满整个交叉轴。

space-between:于交叉轴两端对齐，轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。

 

项目的属性

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

 

order:定义项目的排列顺序，数字越小越靠前。

flex-grow:定义项目的放大比例，默认为0，不放大。

flex-shrink:定义项目的缩小比例，默认为1，如果空间不足，项目将缩小。

flex-basis:定义了在分配多余的空间以前，项目占据的主轴空间。

flex:flex-grow+flex-shrink+flex-basis，默认0 1 auto

align-self:单个项目与其他项目不一样的对齐方式。约等于align-items。