flex 样式总结

1、上下顶边

display: flex;

flex-direction:row;

flex-wrap:wrap;

align-content:space-between;

 

2、垂直居中

display:flex;

align-items:center;/*垂直居中*/

justify-content: center;/*水平居中*/

display:flex;  

 flex-wrap: wrap;换行

 

3、flex中内容居下

可以让上面的元素flex-start, 下面的元素flex-end。

.flex-box {

　　display: flex;

　　 min-height: 100%; /×保证父节点至少占满高度×/

　　flex-flow: row wrap;/×使用行布局，并可以换行。×/

　　width: 300px;

}

.variable {

　　width: 100%;

　　height: 100px; /×这个高度会不停改变×/

　　background: green;

　　align-self: flex-start;

}

.bottom {

　　width: 100%;

　　height: 50px;

　　background: blue;

　　align-self: flex-end;

}

4、flex 主轴的方向

flex-direction:

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。