flex弹性布局

justify-content 主轴排列

当主轴默认为横向的时候才为横向排列

属性值

 

 

 

 

 

 align-items 交叉轴排列

只有一跟轴线时方便使用

属性值

 

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

 属性值有 flex-start | flex-end | center | space-between | space-around | space-evenly

效果同justify-在交叉轴排列

flex-wrap 换行

.box{
    flex-wrap: nowarp | wrap | wrap-reverse;
}
nowrap（默认值）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

flex-direction 定义主轴方向

.box{
    flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
注意： flex-direction 改为垂直方向时，jusitify控制垂直方向，align控制水平方向

 

---

以上就是flex的基本用法

可以去Flexbox Froggy - A game for learning CSS flexbox

练习使用