flex:0 flex:1 flex:auto flex:none之间的区别
之前对flex的值经常使用的可能就是flex:1了,对于其余几种值却不是很清楚它们的用法;
这篇文章,原文地址:flex:0 flex:1 flex:none flex:auto应该在什么场景下使用?终于明白了它们之间的区别及用法。
flex属性是由flex-grow, flex-shrink, flex-basis这三个属性的缩写,用法及介绍可以看这里,这就不做赘述了。
flex:initial—— flex:0 1 auto
flex:initial是flex的默认属性,具体表现为,当容器有剩余空间时不增长,当容器空间不足时会缩小,尺寸自适应内容;
效果如下所示:
代码如下所示:(下面例子代码类似,只是flex值改变,就不做展示)
<h4>flex:initial</h4>
<div class="container"><div class="iten">天高地迥</div><div class="iten">觉宇宙之无穷</div><div class="iten">兴尽悲来</div><div class="iten">识盈虚之有数</div>
</div><style>.container{display: flex;border:1px red solid;width: 400px;}.container div{border: 1px blue solid;flex:initial;}</style>
flex:0——flex: 0 1 0% 与 flex: none —— flex: 0 0 auto
- flex:0 1 0%表示flex-grow是0,flex-shrink是1,所以flex:0元素会缩小但不会扩展,在加上flex-basis
:0%
表示建议支持是0,因此,设置flex:0的元素的最终尺寸表现为最小内容宽度;
效果图如下所示:
- flex: 0 0 auto表示flex-grow是0,flex-shrink是0,flex-basis是auto,所以元素既不会扩展也不会收缩,然后flex-basis是auto代表尺寸由内容决定,由于元素不具有弹性也就不会换行,最终表现为最大内容宽度
flex:1——flex: 1 1 0% 与 flex:auto——flex:1 1 auto
flex:1与flex:auto 两个对应的flex-grow和flex-shrink属性值都是1,只有flex-basis不同,这两种具体表现形式为,元素尺寸可以弹性增大,也可以弹性减小,在flex:1 时在尺寸不足时会优先最小化尺寸,flex:auto在尺寸不足时优先最大化内容尺寸。
效果如下所示:
上图体现了两者的区别,虽然都是充分分配容器内容,但是flex:1 的尺寸是较长的尺寸优先牺牲自己的尺寸,而flex:auto 中是较长的尺寸优先扩展自己的尺寸。
所以,flex:1 更适合在等比例列表时使用,flex:auto适用于元素充分利用剩余空间,比如头部导航文字多少不一致时使用
flex:0 flex:1 flex:auto flex:none之间的区别相关推荐
- flex:0是什么意思,flex:0在IE11遇到的问题
flex:0是什么意思,flex:0在IE11遇到的问题 flex:0表示什么意思 flex 各属性含义 在ie中遇到的问题 flex:0表示什么意思 flex: 0等同于flex: 0 1 0%,也 ...
- 前端中全部盒子靠左对齐_前端面试一百问之弹性盒子中 flex: 0 1 auto 表示什么意思...
flex Box 布局(Flexible Box)旨在提供一种更有效的方式来布局.对齐和分配容器中项目之间的空间,即使它们的大小是未知的或动态改变的.其主要思想是让容器能根据可用空间的大小来动态地改变 ...
- 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属性:flex:0|1|auto
flex属性是flex-grow:存在剩余空间时放大比例(默认值是0).flex-shrik:空间不足时,缩小比例(默认值是1).flex-basis(默认是auto,即项目本来的大小)的缩写. fl ...
- flex:1详解,以及flex:1和flex:auto的区别
前言 在工作中,我们经常会用到flex:1这个属性,来使我们flex中的元素自适应宽度,但在这之前,我并没有详细了解过flex:1这个属性具体代表什么,特此写一篇博客分享一下学习到的知识. 什么是fl ...
- Foundation ActionScript 3.0.With Flash CS3 And Flex ..
这是一本很好的电子书,可以帮助你更好的学习flash and flex. Foundation ActionScript 3.0.With Flash CS3 And Flex.PDF 转载于:htt ...
- flex布局一行三个_CSS Flex布局
Flex之前 在flex布局出现以前,css布局大致就以下几种布局: 主要使用: normal flow 正常流.文档流 float + clearfix position: relative + p ...
- Flex 3 与 Flex 4 beta 之间的区别
Flex 3 与 Flex 4 beta 之间的区别 Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动.Flex 4 beta 引入了一个新的组件和外观架构.但是 ...
- flex布局 flex_时髦的Flickr Flex小部件
flex布局 flex A web widget, or badge, is a small, embeddable element that you can add to your site tha ...
最新文章
- (C++)第一个字母变成第26个字母,第i个字母变成第(26-i+1)个字母,非字母字符不变。要求根据密码译回原文,并输出。
- java 画图 怎么清除已经画出来的图形_ppt小技巧——用paint3d画3d演示内容
- 网站排名好却没流量到底是什么环节出了问题?
- Java中Date及Timestamp时间相关内容【转】
- 类,对象,方法的使用
- wxWidgets:HtmlLbox wxWidgets 示例
- 【Linux】一步一步学Linux——bind命令(231)
- 心事一件件的了掉,希望一切都能恢复到正常
- 滴滴 KDD 2018 论文详解:基于强化学习技术的智能派单模型
- https://www.usb.org/
- Linux 将本地文件上传Linux服务器, 即ssh 命令上传本地文件
- Android 白天黑夜模式切换适配及引起的Activity销毁重启解决
- Web端网页QQ临时会话在线咨询
- 重力加速度传感器角度输出
- 识别速度3.6ms/帧,人像抠图、工业质检、遥感识别,用这一个分割模型就够了
- web语意化的深入理解
- 助力“双11”智能化物流,顺丰、中通、韵达分享架构改造经验
- 用Python制作高逼格数学动画manim
- 正点原子第四期环境搭建
- 杀毒软件 防火墙 PHPIDS打造php网站服务器三位一体宙斯盾安防