css属性为 { flex: 1 }时表示的意思
时间:2022-07-27
本文章向大家介绍css属性为 { flex: 1 }时表示的意思,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
flex属性是 flex-grow + flex-shrink + flex-basis 的缩写
1.赋给3个值
.item {
flex: 100 200 300px;
}
// 等价于
.item {
flex-grow: 100;
flex-shrink: 200;
flex-basis: 300px;
}
2.赋值为auto
.item {
flex: auto;
}
//等价于
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
3.赋值为none
.item {
flex: none;
}
// 等价于
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
4.赋值为非负数
// 该数字为 flex-grow 值,而flex-shrink 的值取 1,flex-basis 取 0%:
.item {
flex: 1;
}
// 等价于
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
5.赋值为一个长度或百分比
// 将长度或百分比设为 flex-basis 值,而flex-grow 取 1,flex-shrink 取 1
.item1 {
flex: 0%;
}
// 等价于
.item1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
// -----------------
.item2 {
flex: 24px;
}
// 等价于
.item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
6.赋值为两个非负数
// 将两个数字分别设为 flex-grow 和 flex-shrink 的值,而flex-basis 取 0%
.item {
flex: 10 20;
}
// 等价于
.item {
flex-grow: 10;
flex-shrink: 20;
flex-basis: 0%;
}
7.赋值为一个非负数和一个长度或百分比
// 将非负数字和 长度或百分比 分别设为 flex-grow 和 flex-basis 的值,flex-shrink 取 1
.item {
flex: 10 100px;
}
// 等价于
.item {
flex-grow: 10;
flex-shrink: 1;
flex-basis: 100px;
}
flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性有关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况:
- auto:首先检索该子元素的主尺寸,如果主尺寸不为 auto,则使用值采取主尺寸之值;如果也是 -auto,则使用值为 content。
- content:指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。
- 百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样
举一个不同的值之间的区别:
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
- 主轴上父容器总尺寸为 600px
- 子元素的总基准值是:0% + auto + 200px = 300px,其中
0% 即 0 宽度 auto 对应取主尺寸即 100px
- 故剩余空间为 600px - 300px = 300px
- 伸缩放大系数之和为: 2 + 2 + 1 = 5
- 剩余空间分配如下:
item-1 和 item-2 各分配 2/5,各得 120px item-3 分配 1/5,得 60px
各项目最终宽度为:
- item-1 = 0% + 120px = 120px
- item-2 = auto + 120px = 220px
- item-3 = 200px + 60px = 260px
- 当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设
- 而 item-2 基准值取 auto 的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间
- 斯坦福发布首份 AI Index 报告,AI 研究者不再茫然
- jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)
- Java程序员必读,Java设计模式应该遵循哪些原则
- Visual Studio 2010快速参考指南里头的Scrum海报
- TFS2010 Team Project Collections
- 基于Ext.Panel扩展一个更容易操作的Canvas
- 好玩的效果很好的Html游戏和范例
- jQuery仿极客公园火箭发射“返回顶部”效果(优化篇)
- 北京市首个无人驾驶试运营基地落户顺义
- 后rtx集成时代
- 后短信集成时代
- jQuery仿极客公园火箭发射“返回顶部”效果(WordPress代码篇)
- Windows 2008 R2 Server Core .NET环境配置
- Request——Node世界中被依赖最多的库No.2
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例