Flex布局中的flex属性

1.flex-grow，flex-shrink，flex-basis取值含义

flex-grow：

延申性描述。在满足“延申条件”时，flex容器中的项目会按照设置的flex-grow值的比例来延申，占满容器剩余空间。

取值情况：

取负值无效。

取0值表示不延申。

取小数情况表示不完全延申，W3C不推荐取小数。

flex-shrink：

收缩性描述。在满足“收缩条件”时，flex容器中的项目会按照设置的flex-shrink和flex-basis乘积的比例来收缩，适应容器大小。

取值情况：

取负值无效。

取0值表示不收缩。

取小数情况表示不完全收缩，W3C不推荐取小数。

flex-basis：

项目占主轴空间描述。描述项目占据flex容器主轴的空间为多少，参与“延申条件”和“收缩条件”的计算。

取值情况：

取0表示项目在容器中不占位置。

取auto表示项目在容器主轴的空间按优先级由with或content决定。（在都赋值情况下的优先级：flex-basis>witdh>盒模型content）

2.flex取值含义

2.1 flex单值语法

取关键字：

initial：flex默认值，表示只有收缩性。flex-grow: 0, flex-shrink: 1, flex-basis: auto

auto：表示有收缩性也有延申性。flex-grow: 1, flex-shrink: 1, flex-basis: auto

none：表示没有收缩性也没有延伸性。flex-grow: 0, flex-shrink: 0, flex-basis: auto

取数值：

：表示设置延申性。flex-grow: <number>, flex-shrink: 1, flex-basis: 0

宽度值：例如px，rem，em等，表示设置项目占主轴空间。flex-grow: 0, flex-shrink: 1, flex-basis: 宽度值

2.2 flex双值语法

第二个值取数值：

：表示设置收缩性。flex-grow: 第一个值已设置, flex-shrink: <number>, flex-basis: auto

宽度值：例如px，rem，em等，表示设置项目占主轴空间。flex-grow: 第一个值已设置, flex-shrink: 1, flex-basis: 宽度值

2.3 flex三值语法

描述flex-grow，flex-shrink，flex-basis。按照各自的规则取值即可。

3.flex延申计算与收缩计算

3.1 延申计算

当各个项目的flex-grow之和大于1时：

根据flex容器中各个项目flex-basis的值计算是否在主轴上有剩余空间，假设有那么进行延申计算
剩余空间按照各个项目的flex-grow的比例分配到各个项目上进行延申

当各个项目的flex-grow之和小于1时：

根据flex容器中各个项目flex-basis的值计算是否在主轴上有剩余空间，假设有那么进行延申计算
要延申的空间是剩余空间乘上flex-grow之和。之后按照各个项目flex-grow的比例分配到各个项目上进行收缩

3.2 收缩计算

当各个项目的flex-shrink之和大于1时：

根据flex容器中各个项目flex-basis的值计算是否超出了主轴空间，假设超出了那么进行收缩计算
要收缩的空间是总空间减去flex容器的主轴空间。之和按照各个项目flex-shrink×flex-basis的比例分配到各个项目上进行收缩

当各个项目的flex-shrink之和小于1时：

根据flex容器中各个项目flex-basis的值计算是否超出了主轴空间，假设超出了那么进行收缩计算
要收缩的空间是总空间减去flex容器的主轴空间再乘上flex-shrink之和。之后按照各个项目flex-shrink×flex-basis的比例分配到各个项目上进行收缩。

参考链接：

掘金博客 https://juejin.cn/post/6904462648520212488#comment

掘金博客 https://juejin.cn/post/6859547132035072007#comment

W3C官网 https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-flex-grow-factor

博客园博客 https://www.cnblogs.com/oxspirt/p/11070739.html

Flex布局中的flex属性相关推荐

演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
Flex布局常用的一些属性及解释
记录一下忘记的时候翻一下父项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align- ...
Flex布局常见父项属性（一）- flex-direction
一.flex-direction用于设置主轴的方向 1.主轴和侧轴在flex布局中分为主轴和侧轴两个方向,也可称为行和列.x轴和y轴其中默认主轴方向为x轴,水平向右默认侧轴方向为y轴,水平向下 ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
flex布局父项常见属性justify-content
1.flex布局父项常见属性 justify-content设置主轴上的子元素排列方式 justify-content 属性定义了项目在主轴上的对齐方式注意:使用这个属性之前一定要确定好主轴是哪个 ...
ArcGIS Flex API 中的 Flex 技术（一）--事件
作者:Flyingis 本文严禁用于商业目的,如需转载请注明作者及原文链接,其他疑问请联系:dev.vip#gmail.com 在ArcGIS Flex API中探索Flex使用是一种不错的学习方法, ...
网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局",任何容器都可以指定为Flex布局,设置Flex布局会使得子元素的float.clear.vertical ...
微信小程序（safair浏览器）flex布局中的坑
今天在用微信小程序做flex布局的时候遇到了一些问题. 布局简单来说是这样的,最外层是一个flex布局属性为flex-direction:column的元素.里面有未设置height,并且flex-g ...