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%,元素尺寸可以弹性增大,也可以弹性减小,在容器尺寸不足时会优先最小化内容尺寸,
使用场景![](/assets/blank.gif)
还适用于无规律布局中动态内容元素,效果见
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;
}
css中flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景相关推荐
- CSS 中的 initial、inherit、unset、revert、all
在css中,initial(初始).inherit(继承).unset(未设置).revert(还原)这四个关键字可以应用于所有的CSS属性 initial - 初始默认值.(IE不支持) inher ...
- html5 lang en 乱码,CSS中的html [lang =“en”]和html:lang(en)有什么区别?
The difference between :lang(C) and the '|=' operator is that the '|=' operator only performs a comp ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
- html的opacity标签,css中opacity是什么意思
css样式 给div样式opacity:0 是什么意思 透明度 注意 ie低版本要实现透明度必须用ie特有的滤镜 而非简单的opacity CSS中 not(.active) { opacity: 0 ...
- CSS中flex的用法( 学习笔记 )
flex( 弹性盒.伸缩盒 ) flex 的介绍 flex是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以随页面的大小的改变而改变 弹性容器 要使 ...
- CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位 一.固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
- CSS中flex弹性盒子——弹性容器属性,弹性元素属性(附图)
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,2009 ...
- css中flex=1,css flex 1 省略号
css flex 1 省略号 css block布局省略号通常需要满足固定高和固定宽才能实现省略号,本章节将演示如何实现css flex 1 省略号. 单行文本省略号 body { padding: ...
- 【Css\flex】css中关于弹性布局flex的综合用法(示例展示)
flex-shrink:0; 或width:0; flex-grow:0; 将子div自动伸缩取消 flex-grow;此属性为是否自动增长空间, flex-shrink;此属性为是否自动缩小空间 f ...
最新文章
- Winform中实现设置ZedGraph的GraphPane的大小匹配ZedGraphControl
- ebs 供应商地点信息_实探荣耀办公地:与高通接近达成合作,加快供应商整合脚步...
- 【SSH系列】Hibernate映射 -- 一对多关联映射
- 同级子目录下重新设置属性失效
- 【jeecg-mybatis版本】 mybatis+spring mvc 完美整合方案 查询,保存,更新,删除自动生成
- ubuntu atpdpkg
- java判断字符串是子串_【Java】判断字符串是否包含子字符串
- svn服务端及客户端搭建和使用(一)
- 台式计算机能不能安装蓝牙驱动,win7电脑蓝牙驱动怎么安装,详细教您怎么安装...
- 领导力的21个法则-盖子法则
- 高等数学--微分定理及其应用(四)
- 时间序列常见模型介绍与实战(SPSS)
- 华为用linux系统装eclipse,centos装eclipse
- Unity 3D 多媒体 音频
- 使用CAXA建立螺纹
- 数据库与数据库管理系统的区别
- Ultimaker荣获领先的IDC创新者荣誉
- mixly实现遥控器控制led
- php sqlsrv 类,PHP for SQLSrv 操作类
- fluent-bit之配置详解