css弹性容器

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情 >>

一.弹性容器的样式

*{ margin: 0; padding: 0; list-style: none; }

ul{
    width: 800px;
    border: 10px red solid;
  /* 设置ul为弹性容器 */
    display: flex;

    /* flex-direction: column; */

    /* flex-wrap: 
        设置弹性元素是否在弹性容器中自动换行
        可选值：
            nowrap 默认值，元素不会自动换行
            wrap 元素沿着辅轴方向自动换行
            wrap-reverse 元素沿着辅轴反方向换行
    */

    /* flex-wrap: wrap-reverse; */

    /* flex-flow:  wrap 和 direction 的简写属性 */
    /* flex-flow: row wrap; */


    /*  
        justify-content
            - 如何分配主轴上的空白空间（主轴上的元素如何排列）
            - 可选值：
                flex-start 元素沿着主轴起边排列
                flex-end 元素沿着主轴终边排列
                center 元素居中排列
                space-around 空白分布到元素两侧
                space-between 空白均匀分布到元素间
                space-evenly 空白分布到元素的单侧
    */
    /* justify-content: center; */
}

li{
    width: 200px;
    height: 100px;
    background-color: #bfa;
    font-size: 50px;
    text-align: center;
    line-height: 100px;
    flex-shrink: 0;


    
}
/* li:nth-child(1){
} */

li:nth-child(2){
    background-color: pink;
}

li:nth-child(3){
    background-color: orange;
}

 <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
复制代码

二.弹性容器的样式（2）

*{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul{
        width: 600px;
        height: 800px;
        border: 10px red solid;
      /* 设置ul为弹性容器 */
        display: flex;

        /* flex-direction: column; */

        /* flex-wrap: 
            设置弹性元素是否在弹性容器中自动换行
            可选值：
                nowrap 默认值，元素不会自动换行
                wrap 元素沿着辅轴方向自动换行
                wrap-reverse 元素沿着辅轴反方向换行
        */

        /* flex-wrap: wrap-reverse; */

        /* flex-flow:  wrap 和 direction 的简写属性 */
        flex-flow: row wrap;


        /*  
            justify-content
                - 如何分配主轴上的空白空间（主轴上的元素如何排列）
                - 可选值：
                    flex-start 元素沿着主轴起边排列
                    flex-end 元素沿着主轴终边排列
                    center 元素居中排列
                    space-around 空白分布到元素两侧
                    space-between 空白均匀分布到元素间
                    space-evenly 空白分布到元素的单侧
        */
        /* justify-content: center; */

        /*
         align-items: 
            - 元素在辅轴上如何对齐
            - 元素间的关系
                - 可选值：
                    stretch 默认值，将元素的长度设置为相同的值
                    flex-start 元素不会拉伸，沿着辅轴起边对齐
                    flex-end 沿着辅轴的终边对齐
                    center 居中对齐
                    baseline 基线对齐
         */

         /* justify-content: center; */
         align-items: flex-start;


         /* align-content: 辅轴空白空间的分布 */
         align-content: space-between;
        
    }

    li{
        width: 200px;
        background-color: #bfa;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        flex-shrink: 0;


        
    }
    li:nth-child(1){
        /* align-self: 用来覆盖当前弹性元素上的align-items */
        align-self: stretch;
    }

    li:nth-child(2){
        background-color: pink;
    }

    li:nth-child(3){
        background-color: orange;
    }

    li:nth-child(4){
        background-color: yellow;
    }

    li:nth-child(5){
        background-color: chocolate;
    }
复制代码

三.总结

  今天的内容就到这里就结束了，明天我会继续更新更多的内容的，谢谢大家！