Cssflex

蓝色魅影

            .box {
            display: flex;
            
            /*默认值起点开始依次排序*/
            justify-content:flex-start;
            
            /*终点开始依次排序*/
            justify-content:flex-end;
            
            /* 沿主轴居中排序 */
            justify-content: center;

            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-evenly;

            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;
            
             /* 垂直居中 */
            align-items: center;
            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
            /* align-items: stretch; */
            
            } 子级都没有宽跟着内容走，没有高直接充满。没有高设置垂直居中跟内容走高。
            
            /* 单独设置某个弹性盒子的侧轴对齐方式注意添加到子级 */
            .box div:nth-child(2) {
            align-self: center;
            }
            
            .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 1; 
            }
            /* .box div:nth-child(3) {
                flex: 1;
            }*/
            
            .box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列 */
            flex-direction: column;

            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;

            /* 视觉效果: 垂直居中 */
            justify-content: center;
            
            /*---------------------------------------------------------------*/
            .box {
            display: flex;

            /* 默认值, 不换行 */
            /* flex-wrap: nowrap; */

            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 调节行对齐方式 */
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;