CSS弹性布局(Flexbox)演示

flex-direction 主轴方向

【横向排列】flex-direction:row

1
2
3

【纵向排列】flex-direction:column

1
2
3

flex-wrap 换行

【允许换行】flex-wrap:wrap

1
2
3
4
5
6

justify-content 主轴对齐

【靠左/靠上】justify-content:flex-start

1
2
3

【靠右/靠下】justify-content:flex-end

1
2
3

【居中】justify-content:center

1
2
3

【四周都有边距】justify-content:space-around

1
2
3

【两者之间有边距】justify-content:space-between

1
2
3

【边距平均分】justify-content:space-evenly

1
2
3

align-items 次轴对齐

【靠左/靠上】justify-content:flex-start

1
2
3

【靠右/靠下】justify-content:flex-end

1
2
3

【居中】justify-content:center

1
2
3

align-content 多行对齐

【靠左/靠上】justify-content:flex-start

1
2
3
4
5
6
7
8

【靠右/靠下】justify-content:flex-end

1
2
3
4
5
6
7
8

【居中】justify-content:center

1
2
3
4
5
6
7
8