HTML、CSS学习笔记6（flex补充）

一、flex延伸

1.flex——修改主轴方向：flex-direction

 1.先确定主轴方向；2.再选择对应属性实现主轴或侧轴上的视觉效果

            display: flex;
            /* 1.先确定主轴方向；2.再选择对应属性实现主轴或侧轴上的视觉效果 */
            /* 修改主轴的方向：列 */
            flex-direction: column;

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

            /* 视觉效果：垂直居中 */
            justify-content: center;

 2.弹性盒子换行——flex-wrap

只要父级设置了display: flex;子级的尺寸都可以自动伸缩（子级有设置宽度高度）。当父级设置了flex-wrap之后，弹性盒子（子级）尺寸不会自动伸缩

   

 默认情况下，不换行，即flex-wrap: nowrap;

换行：flex-wrap: wrap;

注：align-content是调整行的对齐方式

1. align-content: space-between;                                            2.align-content: space-around;

 https://blog.csdn.net/m0_73809176/article/details/129264629?spm=1001.2014.3001.5501