css中flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景

flex:initial

flex: initial【默认值】等同于flex: 0 1 auto ,flex容器有剩余空间时其尺寸不会增长(flex-grow:0),在flex容器尺寸不足时尺寸会收缩变小(flex-shrink:1),同时当前应用flex:initial的元素的尺寸自适应于内容(flex-basis:auto)
在这里插入图片描述

使用场景

在这里插入图片描述

flex:0

flex:0等同于设置flex:0 1 0%,元素尺寸不会弹性增大(flex-grow:0),但是会弹性收缩(flex-shrink:1),考虑到此时flex-basis属性值是0%,表示基础尺寸是0,因此设置flex:0的元素尺寸表现为最小内容宽度,也就是文字会呈现“一柱擎天”的效果。
在这里插入图片描述

使用场景

在这里插入图片描述

flex:none

flex:none等同于设置flex:0 0 auto,flex子项没有弹性,此时flex-basis属性值是auto,即基础尺寸由内容决定,因此设置flex:none的元素最终尺寸通常表现为最大内容宽度。
在这里插入图片描述

使用场景

<div class="container">
    <img src="1.jpg">
    <p>右侧按钮没有设置flex:none,表现为最小内容宽度。</p>
    <button>按钮</button>
</div>
<div class="container">
    <img src="1.jpg">
    <p>右侧按钮设置了flex:none,按钮正常显示了。</p>
    <button class="none">按钮</button>
</div>

.container {
    display: flex;
    padding: .5rem;
    border: 1px solid lightgray;
    background-color: #fff;
}
img {
    width: 3rem; height: 3rem;
    margin-right: .5rem;
}
button {
    align-self: center;
    padding: 5px;
    margin-left: .5rem;
}
.none {
 flex: none;
}

在这里插入图片描述

flex:1

flex:1等同于设置flex:1 1 0%,元素尺寸可以弹性增大,也可以弹性减小,在容器尺寸不足时会优先最小化内容尺寸,
在这里插入图片描述

使用场景在这里插入图片描述

还适用于无规律布局中动态内容元素,效果见
https://demo.cssworld.cn/new/6/2-10.php

flex:auto

flex:auto等同于设置flex:1 1 auto,元素尺寸可以弹性增大,也可以弹性减小,在容器尺寸不足时会优先最大化内容尺寸。
在这里插入图片描述

使用场景

flex:auto多用于内容固定和内容可控的布局场景,例如导航数量不固定且每个导航文字数量也不固定的导航效果就适合使用flex:auto来实现
在这里插入图片描述

<nav class="flex">
  <span>首页</span>
  <span>排行榜</span>
  <span>我的订单</span>
  <span>个人中心</span>
</nav>
nav span {
 flex: auto;
    line-height: 3rem;
    background: #444;
    color: #fff;
    text-align:center;
}
span + span {
    border-left: 1px solid #eee;
}
  • 5
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值