弹性布局-作用在子容器的六大属性

2019/07/26 15:33
阅读数 12

2019-07-26

①  order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

 

②  flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

 

 ③ flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

 

④  flex-basis定义项目占据的主轴空间。(如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 width将会失效。)

⑤  flex属性是flex-grow, flex-shrink  flex-basis的简写,默认值为0 1 auto。后两个属性可选。

此属性有两个快捷设置:auto=(1 1 auto)/none=(0 0 auto)

⑥  align-self:定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性。

属性值:与align-items相同,默认值为auto,表示继承父容器的align-items属性值。

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .father_box{
        display: flex;
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
    }
    .father_box div{
        width: 100px;
        height: 100px;
        background-color: hotpink;
        border:1px solid black;
    }
    .son_box1{
        order: 1;
        /* box1就会跑到最后一位 默认值为0 */
        /* flex-shrink: 0; */
        /* box1 不会被挤压宽度 其余挤压更严重 默认值为1 
            所有div 都设置为0,并且宽度不够时, 多余div将挤出父容器  
        */
    }
    .son_box2{
        flex-basis: 100%;
        /* box2将会占father_box总宽度的一半 */
    }
    .son_box3{
        align-self: flex-end;
        /* box3会从下面开始 */
    }
    .son_box4{
        
    }
</style>
<body>
    <div class="father_box">
        <div class="son_box1">1</div>
        <div class="son_box2">2</div>
        <div class="son_box3">3</div>
        <div class="son_box4">4</div>
    </div>
</body>
</html>

  

1
2
3
4
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部