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

最新推荐文章于 2023-05-13 23:13:14 发布

aokuang7460

最新推荐文章于 2023-05-13 23:13:14 发布

阅读量382

点赞数

原文链接：http://www.cnblogs.com/ATnTention/p/11250698.html

版权

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>

转载于:https://www.cnblogs.com/ATnTention/p/11250698.html

aokuang7460

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性布局-作用在子容器的六大属性

2019-07-26①order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。②flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。③flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。④flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性...
复制链接

扫一扫