flex布局(二)

我们上篇文章主要介绍了flex布局中写在父元素上的常见属性,今天则给大家介绍下flex布局中子项常见属性。

1. flex-grow 定义项目的放大比例

flex-grow属性是定义项目的放大比例,也可以理解为表示占多少份数。主要作用是:分配剩余空间的

/* flex-grow: <number>; 属性值为非负数 */

flex-grow:0;   /* 默认值为0,表示即使存在剩余空间,也不放大 */

①如果给其中一个子项 设置 flex-grow: 1;  则表示这个项目把剩余空间都充满;

②如果给每个子项都设置 flex-grow: 1;  则表示每个项目会平均分配到相同的宽度。

<style>
    .box {
        display: flex;
        width: 700px;
        border: 1px solid red;
    }
    
    .item {
        width: 150px;
        height: 150px;
        background-color: pink;
    }
    
    .item:nth-child(2) {
        background-color: skyblue;
        flex-grow: 1;    /*给第二个子项增加flex-grow:1; 则表示它会把剩余空间都充满 */
    }
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

 上述代码得到的效果如上图所示,验证了前面所说的第①点。

.item {
     flex-grow: 1;   /*给每个子项增加flex-grow:1; 则表示它们会平均分配容器的宽度 */
     width: 150px;
     height: 150px;
     background-color: pink;
}
        
.item:nth-child(2) {
     background-color: skyblue;
}

将flex-grow:1;更改到每个子项下,就可以得到上述效果,从而验证了第②点。

2. flex-shrink 是否允许被压缩

我们都知道flex布局默认是不换行的,就算子项的宽度和大于容器的宽度,也不会换行,那么这时为了把这些子元素排列下,那么就会默认去压缩子项的宽度。

flex-shrink属性,则是用于定义子项是否允许被压缩

flex-shrink:1;    /* 1是默认值 表示允许被压缩 */

flex-shrink:0;    /* 表示不允许被压缩,保持设置的尺寸 */

代码验证:

<style>
    .box {
        display: flex;
        width: 700px;
        border: 1px solid red;
    }
    
    .item {
        width: 200px;
        height: 150px;
        background-color: pink;
    }
    
    .item:nth-child(2) {
        background-color: skyblue;
        flex-shrink: 0;    /* 设置为0,表示不允许被压缩 */
    } 
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

容器宽度为700px,而每个子项宽度200px,明显一行排不下,又默认排在一行,所以只能压缩子项宽度。但是我给第二个子项设置了 flex-shrink:0;  后,看上图效果,可以发现它的宽度依旧为200px,没有变小

3. flex-basis 设置宽度

flex-basis属性它的作用和width属性是一样的。但是优先级比width高,同时设置时,只会展示flex-basisi的宽度。

<style>
    .box {
        display: flex;
        width: 400px;
        border: 1px solid red;
    } 
    .item {
        flex-basis: 300px;     /*给子项增加flex-basis:300px;*/
        width: 200px;          /*给子项设置宽度width:200px;*/
        height: 150px;
        background-color: pink;
    }
</style>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>

通过上图可以发现,同时给子项设置flex-basis和width,最后子项的宽度以flex-basis设置的尺寸为准,当然前提条件是容器的宽度足够大,如果容器宽度比他们设置的尺寸小,那么子项宽度和容器宽度一致。

flex-basis属性我们平时不常使用,都是使用默认值auto,也不建议和width同时使用。

4. flex属性 

flex 属性是 flex-grow 、flex-shrink和 flex-basis 属性的复合属性。

我们实际开发中flex-shrink和 flex-basis 属性,很少去设置,所以基本使用默认值。

因此,常直接用flex: 1;表示平均分布宽度 ,其他属性采用默认值  等同于flex: 1 1 auto;

5.align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

<style>
    .box {
        display: flex;
        width: 550px;
        height: 300px;
        border: 1px solid red;
        align-items: flex-start;
    }
    
    .item {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 10px;
    }
    
    .item:nth-child(3) {
        align-self: flex-end;  /* 设置自己在侧轴上的排列方式 */
    }
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

给第三个盒子单独设置align-self: flex-end;   从上图效果可以看出它覆盖了父元素设置的align-self: flex-start;  变得与众不同了。

6. order 属性定义项目的排列顺序

 数值越小,排列越靠前,默认为0。所以要想把后面的盒子排到前面来,则只需将其order值改为小于0就行。

<style>
    .box {
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        height: 350px;
        border: 1px solid red;
    }
    .item {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 10px;
    }
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div> 
        <div class="item" style="order: -1;">3</div>   <!-- 给第三个盒子的order改为-1 -->
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item" style="order: -2;">6</div>   <!-- 给第六个盒子的order改为-2-->
    </div>
</body>

因为order 默认值为0,代码中把第三个盒子的order改为-1,则值是第二小的,而第六个盒子的order为-2,值是最小的,所以根据值越小,排列越前,从而就得到了上图效果。

7.总结

以上就是flex布局中常见的作用于子项的属性,可以简单总结为:

① flex-grow:用于分配容器的剩余空间;
② flex-shrink:设置子元素是否允许被压缩;
③ flex-basis:设置子元素的宽度;
④ flex:复合属性,相当于同时设置了flex-grow 、flow-shrink和 flex-basis,但常用于表示flex-grow,其余两个属性使用默认值,不写出来,比如flex:1;
⑤ align-self:控制子项自己在侧轴上的排列方式;
⑥ order :定义项目的排列顺序。

flex布局相较于传统布局而言,操作方便,布局极为简单,尤其是在移动端应用很广泛,因此这是每个前端工程师都必须掌握的布局方式。

flex布局的基本属性和用法,通过今昨天两篇文章,基本都介绍完了,孰能生巧,先明确每个属性的作用和特性,然后加以练习,就能很好的快速写出页面了。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值