学习弹性布局

个人理解笔记

父盒子

 display: flex;弹性布局

方向

        flex-direction: row;//水平 从左到右

        flex-direction: row-reverse;//水平 从右到左

        flex-direction: column;//垂直 从上到下

        flex-direction: column-reverse;//垂直 从下到上

是否换行

        flex-wrap: nowrap;//不换

        flex-wrap: wrap;//换 从上而下

        flex-wrap: wrap-reverse;//换 从下而上

 对齐方式(水平)

        justify-content: flex-start;//从左到右

        justify-content: flex-end;//从右到左

        justify-content: space-between;//平等的分开间距

        justify-content: center; //居中

        justify-content: space-around;//每个小板块间距相同

 单线轴（垂直）

        align-items: flex-start; //从上到下

        align-items: flex-end; //从下到上

        align-items: center; //居中

        align-items: baseline; //从第一行文字开始

        align-items: stretch;//没有高度，占满

多线轴

        align-content: flex-start;

        align-content: flex-end;

        align-content: space-between;

        align-content: space-around;

        align-content: center;