浅析flex中关于排序的部分在css的flex属性中，常用的就是flex关于水平、垂直居中的部分了，可如果用过css的U

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在css的flex属性中，常用的就是flex关于水平、垂直居中的部分了，可如果用过css的UI框架的话，那么css的flex属性和column属性就尤其有趣了，这里分享下关于flex排序部分的笔记。

1、在flex盒子中，主轴与交叉轴概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

.box{
    display: flex;
    flex-direction: row(默认值) | row-reverse | column | column-reverse;
}

.box{
    display: flex;
    flex-wrap: nowrap(默认值) | wrap | wrap-reverse(第一行在下面)
}

.box{
    dispay: flex;
    flex-flow: <flex-direction> || <flex-wrap>; (默认值: row nowrap)
}

.box{
    display: flex;
    justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}

.box{
    display: flex;
    align-items: flex-start | flex-end | cneter | baseline | stretch(默认值);
}

.box{
    display: flex;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认值);
}