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

flex布局 display:flex;

子元素宽度和 < 父元素宽

1
2
3
4

子元素宽度和 > 父元素宽(子元素会自动调整宽度已撑满父元素)

1
2
3
4
5
6

flex布局 主轴方向 flex-direction[row(默认) | row-reverse | column | column-reverse]

flex-direction:row

1
2
3
4

flex-direction:column

1
2
3
4
5
6

flex-direction:row-reverse

1
2
3
4
5
6

flex-direction:column-reverse

1
2
3
4
5
6

定义换行方式flex-wrap[nowrap(默认) | wrap | wrap-reverse]

flex-wrap:wrap

1
2
3
4
5
6

flex-wrap:wrap-reverse

1
2
3
4
5
6

flex-flow 是flex-direction 和 flex-wrap的简写形式

flex-flow:column nowrap

1
2
3
4
5
6

justify-content 主轴方向对齐方式

主轴的方向由flex-direction决定。
flex-direction取值是row的时候主轴在水平方向,
flex-drection取值是column的时候主轴在垂直方向

flex-flow:column nowrap; justify-content:flex-start(水平方向主轴)

1
2
3
4
5
6

flex-flow:column nowrap; justify-content:flex-between(水平方向主轴)

1
2
3

flex-flow:column nowrap; justify-content:center(水平方向主轴)

1
2
3

flex-flow:column nowrap; justify-content:space-around

1
2
3

flex-flow:row; justify-content:flex-end(垂直方向主轴)

align-items: flex-start | flex-end | center | baseline | stretch;
参考的阮老师的博客不过我试了一下baseline没什么效果,不知道是不是我方法有误,请指点

1

flex-flow:row; align-items:center

1
2
3

flex-flow:row; align-items:stretch

1
2
3
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

注意:align-items: stretch; 只有主轴是水平方向的时候才起作用也就是flex-direction:row的时候