Flex布局

.container {
    display: flex | inline-flex;       //可以有两种取值
}

1. flex-direction: 决定主轴的方向(即项目的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

　　默认值：row，主轴为水平方向，起点在左端。

       row-reverse：主轴为水平方向，起点在右端

       column：主轴为垂直方向，起点在上沿

       column-reverse：主轴为垂直方向，起点在下沿

 2. flex-wrap: 决定容器内项目是否可换行

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

　　默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

       wrap：项目主轴总尺寸超出容器时换行，第一行在上方

       wrap-reverse：换行，第一行在下方

 3. justify-content：定义了项目在主轴的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

　　其他相关学习链接：https://zhuanlan.zhihu.com/p/25303493

 

转载于:https://www.cnblogs.com/wjw-/p/11542437.html