2021-06-02-弹性布局

 ul {
        /* 将元素和定义为弹性盒模型 */
        display: flex;
        /* 定义弹性盒的主轴方向 这个方向规定了弹性项的基本排列方式
        默认值是row row表示主轴方向为横向
        column 表示主轴方向为纵向
        row-reverse 横向倒序排列
        column-reverse 纵向倒序排列
         */
        flex-direction: row;
        /* height: 600px; */
        /* 定义弹性项在主轴方向上的排列方式
        flex-start 弹性项沿开始方向布局
        flex-end 弹性项尾部对齐
        space-between 两边对齐中间留白
        space-around 两边的空白是弹性项中间的一半
        center居中对齐
         */
        /* justify-content: space-between; */
        /* flex-wrap 定义弹性项的换行 nowrap不换行也是默认值
        wrap表示换行
        wrap-reverse 在交叉轴方向上倒转换行*/
        flex-wrap: wrap;
        /* 定义和主轴的交叉轴方向上的对齐方式 */
        /* 在只有一行的情况下
            flex-start是默认值 沿首部对齐
            flex-end 尾部对齐
            center 居中
            stretch 拉伸
            baseline 基线对齐*/
        /* align-items: baseline; */
        /* 多行情况下生效的方式 */
        /* 
            flex-start 交叉轴方向首部对齐
            flex-end 交叉轴尾部对齐
            center 居中对齐
            space-between 两边对齐中间留白
            space-around 两边的空白是弹性项中间的一半
         */
        /* align-content: space-between; */
        /* flex-basis 表示弹性项在主轴方向上的扩展距离 */
        /* flex 是  flex-basis flex-shrink flex-grow 的组合属性 */
        /* flex: 1 ,0 ,0; */
        /* flex-shrink定义弹性项的缩小比例 */
        /* flex-shrink: 2; */
        /* flex-grow 定义弹性项的放大比例 */
        /* flex-grow: 1; */
    }