flex属性-flex:1到底是什么

flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

 1. 默认为0，即 即使存在剩余空间，也不会放大；2.所有项目的flex-grow为1：等分剩余空间（自动放大占位）；3.flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍;

2.flex-shrink：定义项目的缩小比例；

 1. 默认为1，即 如果空间不足，该项目将缩小；2. 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；3.flex-shrink为0：空间不足时，该项目不会缩小；4.flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

3.flex-basis：定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

         默认值为auto，即 项目原本大小；设置后项目将占据固定空间。

所以flex属性的默认值为：0 1 auto （不放大会缩小）

flex为none：0 0 auto （不放大也不缩小）

flex为auto：1 1 auto （放大且缩小）

  flex为一个非负数字n：该数字为flex-grow的值，flex：n；=  flex-grow：n；flex-shrink：1；flex-basis：0%；

flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值，flex：n1 n2; = flex-grow：n1；flex-shrink：n2；flex-basis：0%；

flex为一个长度或百分比L：视为flex-basis的值，flex: L; =  flex-grow：1；flex-shrink：1；flex-basis：L；

   flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，flex：n L；= flex-grow：n；flex-shrink：1；flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

到这里我已经解决我的问题啦，flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

flex属性-flex:1到底是什么相关推荐

深入了解 Flex 属性
作者:Ahmad shaded 译者:前端小智来源:sitepoint 移动端阅读:https://mp.weixin.qq.com/s/Tw7gezAn-ld97u8hkyD3kA 点赞再看,微信 ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
补充flex属性---------5月9日
Flex弹性盒子用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. 注意:设置了flex布局之后,资源股市的float.clear和vertical-align属性将失效采用 ...
flex布局 flex全解 flex
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
解析flex属性：flex：1究竟是什么
实现页面中的footer保持在页面底部功能,有一个非常简单的方法: <!DOCTYPE html> <html lang="en"> <head> ...
css flex属性学习笔记
参考文献 flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter)) ...
css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
用css3的flex好久了,虽然用的没问题,但还是很纠结,其他属性大都明白,但是flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的聊天,总算是明白了. 网上大 ...
dispay的flex属性
开发工具与关键技术:dispay的flex属性作者: 黄金燕年级: 1805 撰写时间: 2019年1月28日我们已经在父元素中设置了align-items:center.(将子元素设置为垂直居 ...
flex 布局下关于容器内成员 flex属性的理解
flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现 ...
【CSS随笔】弹性盒子的flex属性
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间 flex属性是flex-grow.flex-shrink和flex-basis属性的简写属性 flex-grow: 可拉伸 flex-s ...

flex属性-flex:1到底是什么

flex属性-flex:1到底是什么相关推荐

最新文章

热门文章