前端回血day24 flex子项伤的CSS属性

取值 含义
order 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0
flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间即使除去元素外的剩余的空白空隙。默认值为0
flex-shrink 属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。0为不收缩。
flex-basis flex-basis定义了在分配剩余空间之前元素的默认大小(优先级高于width，当设置的值大于剩余容器的时候将只会充满容器)
flex flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self align-self指控单独某一个flex子项的垂直对齐方式 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{width: 300px;height: 300px;border: 1px red solid;margin: 0 auto;display: flex;}
    .box div{width: 50px;height: 50px;background-color: rgb(20, 71, 223);line-height: 50px;text-align: center;}
    /* .box div:nth-child(2){order: 1;}
    .box div:nth-child(3){order: -1;} */
    .box div:nth-child(2){flex-grow: 1;background-color: seagreen;}
    .box div:nth-child(3){flex-grow: 3;background-color: saddlebrown;}

    .box2{width: 300px;height: 300px;border: 1px red solid;margin: 0 auto;display: flex;}
    .box2 div{width: 50px;height: 50px;background-color: rgb(20, 71, 223);line-height: 50px;text-align: center;}
    .box2 div:nth-child(2){background-color: seagreen;flex-shrink: 0;}

    .box2{width: 300px;height: 300px;border: 1px red solid;margin: 0 auto;display: flex;}
    .box2 div{width: 50px;height: 50px;background-color: rgb(20, 71, 223);line-height: 50px;text-align: center;}
    .box2 div:nth-child(2){background-color: seagreen;
    /* width: 100px;flex-basis: 150px; */
    /* flex: 0 1 auto; */
    align-self: center;
    }
</style>
<body>
    <!-- <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div> -->

    <!-- <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div> -->

    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>
demo

 

posted @ 2020-11-06 17:49  Delta.Farce  阅读(103)  评论(0)  编辑  收藏  举报