对flex深入研究一点

flex顶层设计

1.在任何流动的方向上(包括上下左右)都能进行良好的布局

2.可以以逆序 或者 以任意顺序排列布局

3.可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列

4.可以弹性的在任意的容器中伸缩大小

5.可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐

主轴和侧轴

什么是主轴

什么是侧轴

他们是如何切换的

首先每一根轴都包括 三个东西:维度、方向、尺寸

  • 所谓的维度实际上就是意思就是子元素 横着排还是竖着排(x 轴 或 y 轴)
  • 方向 即排列子元素的顺序 顺序还是逆序
  • 尺寸 即width[height] : 每一个子元素在主轴方向所占的位置的总和 如果主轴是水平的,那么尺寸就是父元素内所有itemouterWidth总和,如果主轴是垂直的,那么尺寸就是父元素的outerHeight

为了方便 flex-direction + flex-wrap 合并成了一个属性 flex-flow
主侧轴的切换十分简单,当主轴设定的时候,它的垂直面,就默认被设定成了侧轴
flex-flow: row-reverse wrap-reverse

  • 子元素是横着排列的,主轴是水平的横轴,侧轴是竖直的纵轴
  • 子元素是逆序并沿着主轴排列的,从右到左
  • 子元素是换行的
  • 子元素是逆序并沿着侧轴排列的,从下到上

FFC (flex formatting context)

Flexbox 布局新定义了格式化上下文,类似 BFC(block formatting context)。有多类似呢? 就是除了布局和一些细节不同以外的一切规则都和 BFC 是相同的

注意 : 我所指的Flexbox 是指设置了 display: flex; 或 display: inline-flex;的盒子。不是指单单设置了 display: flex; 的盒子。

例如,设置了 display: flex; 或 display: inline-flex的元素,和BFC一样,不会被浮动的元素遮盖,不会垂直外边距坍塌等等。

而对于设置了 display: inline-flex 的盒子来说,我们可以类比 display: inline-box;行理解。即 一个被行列化后的 Flexbox。它不会独占一行,但是可以设置宽和高。

但需要注意的是以下几点细节,Flexbox 布局 和 Block 布局是有细微区别的

  • Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
  • vertical-align 对 Flexbox 中的子元素 是没有效果的
  • float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!)
  • 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素(鱼和熊掌不可得兼嘛)
  • Flexbox 下的子元素不会继承父级容器的宽

flex item(flex 子元素)

CSS解析器会把 定义了 display: flex; 和 display: inline-flex; 的 Flexbox 下的子元素外部装进一个看不见的盒子里,我们通过排列这些盒子来达到排序、布局、 伸缩的目的。

规范中把这种盒子 称为 flex item,而子元素中包括了 标签节点 以及 文本节点。标签节点很容易理解,需要注意的是文本节点。

默认情况下,flex 会将 连续的文本节点 装进 flex-item 之中,使文本可以和标签节点一起排序和定位。

值得注意的是,空格也是文本节点,所以 white-space 会影响Flexbox 中的布局:

flex-item-size 如何计算的

item-size(尺寸)为主轴方向上item的 content 再加上自身的margin 、 border 和 padding 就是这个 item 的尺寸。

1. flex-basis 的优先级比 width[height]: 非auto; 高

如果子元素没有内容和默认固定宽高,且设置了flex-basisflex-item contentflex-basis来决定,无论width[height] 设置了多少。

(可理解为 flex-basis 比 width[height]: 非auto;的优先级高)

flex-basis的优先级比width[height]高,无论width[height]设置多少,flex-item content都以flex-basis来决定

2.元素存在默认宽高

如果子元素有默认固定宽高(例如input 标签)、并且设置了 flex-basis,那么它的 content以 固定宽高为下限,如果flex-basis 超过了固定宽高,那么flex-basis则成为其 content,如果flex-basis比固定宽高小,那么以固定宽高为 content

3.元素存在 min-width[height] 或者 max-width[height]

如果flex-item 有min-width[min-height] 的限制,那么flex-item content按照 min-width 值为下限,如果 flex-basis 的值大于 min-width[min-height] 那么flex-item content以 flex-basis 计算。

如果flex-basis 的值小于 min-width[min-height] 那么flex-item contentmin-width[min-height]

如果 min-width[min-height] 的值已经超出了容器的尺寸,那么即使设置了 flex-shrink。 CSS解析器也不会进行将这个item的 content shrink,而是坚持保留它的min-width[min-height]

4.width[height]: auto; 优先级等于 flex-basis。

前面提到,如果给item同时设置了width[height] 和 flex-basis的话。flex-item content以flex-basis来决定。但是实际上默认的 width[height]: auto; 优先级是等于 flex-basis的。

CSS解析器对比两者的值,两者谁大取谁 作为item的基本尺寸,如果一个item没有内容,flex-item content就会以flex-basis来决定。

但是如果item有了内容,且内容撑开的尺寸比flex-basis大,那么flex-item content就会以width[height]: auto; 来决定,且无法被 shrink。反之,如果比flex-basis小,flex-item content就会以flex-basis来决定

idth: auto; 内容长度比 flex-basis 大,则 flex-item content以内容长度来决定,且无法shrink

如果 flex-basis 的长度大于文字内容长度,那么flex-item content以 flex-basis 

Flexbox 布局很棒还是需要深入理解的

 

转载于:https://www.cnblogs.com/zhouyideboke/p/11327640.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

那些你可能还不知道的新发明

The Wello WaterWheel 对世界上六分之一的人来说,取水是个苦活:步行数小时,排队等待,负重运送。 而花费在这个基本需求上的时间让许多儿童不得不辍学,让女人不能负起责任来处理家务或者工作以取得收入。在很多欠发达地…

AntD中Form的input正则校验:不能输入空格

什么是正则表达式? 在编写处理字符串的程序或网页时,经常有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说,正则表达式就是记录文本规则的代码。 正则test() 方法 定义和用法 test() 方法用于检测一…

引用数据类型分类

引用类既是自己定义的一个类,后面应用非常广泛 类的定义格式 创建java文件,与类名相同 public class 类名{ 数据类型 属性名称1; 数据类型 属性名称2; … } publicclass Phone { /* * 属性 */ String brand;// 品牌型号 String …

关于英文邮件一些tips

需要写的英文邮件多了,就觉得很吃力,尤其是当需要经常写给同一个人时。希望邮件的开头、结尾、一些客套的话能有不同的表达~~ 邮件的开头:感谢读者是邮件开场白的好办法。感谢您的读者能让对方感到高兴,特别是之后你有事相求的情…

react之react-spring动效库

react-spring具有基于钩子和基于组件的API,这里将专门针对所有动画使用具有基本状态的钩子. framer-motion也很好用,但是体积2M多,太大了劝退 react-spring才6KB. react-spring npm搜索 老官网react-spring 官网Getting started | React Spring 做了个横向遍…

Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析

Java生鲜电商平台-电商中海量搜索ElasticSearch架构设计实战与源码解析 生鲜电商搜索引擎的特点 众所周知,标准的搜索引擎主要分成三个大的部分,第一步是爬虫系统,第二步是数据分析,第三步才是检索结果。首先,电商的搜…

并行批处理多个文件 matlab

%初始化matlab并行运行环境 % Initialize Matlab Parallel Computing Environment CoreNum2; %设定机器CPU核心数量&#xff0c;我的机器是双核&#xff0c;所以CoreNum2 if matlabpool(size)<0 %判断并行计算环境是否已然启动 matlabpool(open,local,CoreNum); %若尚未启动…

答应我不要问TCP三次握手四次挥手

衍生头疼问题如下。 请画出三次握手和四次挥手的示意图为什么连接的时候是三次握手&#xff1f;什么是半连接队列&#xff1f;ISN(Initial Sequence Number)是固定的吗&#xff1f;三次握手过程中可以携带数据吗&#xff1f;如果第三次握手丢失了&#xff0c;客户端服务端会如…

专业术语常用名词缩写中英文对照

A:Actuator 执行器A:Amplifier 放大器A:Attendance员工考勤A:Attenuation衰减AA:Antenna amplifier 开线放大器AA:Architectural Acoustics建筑声学AC:Analogue Controller 模拟控制器ACD:Automatic Call Distribution 自动分配话务ACS:Access Control System出入控制系统AD:Ad…

推荐!国外程序员整理的机器学习资源大全

本列表选编了一些机器学习领域牛B的框架、库以及软件&#xff08;按编程语言排序&#xff09;。 C 计算机视觉 CCV —基于C语言/提供缓存/核心的机器视觉库&#xff0c;新颖的机器视觉库OpenCV—它提供C, C, Python, Java 以及 MATLAB接口&#xff0c;并支持Windows, Linux,…

做任务一定要看测试用例

做任务的时候一定要一开始就看测试用例。虽然有的任务自己很熟&#xff0c;但是如果不时时关注测试用例的话&#xff0c;还是容易走偏&#xff0c;到后头再去修改的话&#xff0c;会浪费不少时间。 转载于:https://www.cnblogs.com/superhuake/archive/2011/09/09/2172008.html…

深度学习鼻祖杰夫·辛顿及巨头们的人才抢夺战

摘要&#xff1a;深度学习已经诞生了数十年时间&#xff0c;但直到近几年才受到各大科技公司的重视&#xff0c;被认为是硅谷科技企业的未来&#xff0c;今天为大家介绍的是深度学习的开山鼻祖Geoffrey Hinton。在过去的三十年&#xff0c;深度学习运动一度被认为是学术界的一个…

EM算法(Expectation Maximization Algorithm)

文章目录 1. 前言 2.基础数学知识2.1.凸函数2.2.Jensen不等式 3.EM算法所解决问题的例子 4.EM算法4.1.模型说明 4.2.EM算法推导 4.3.EM算法收敛性证明 4.4. EM算法E步说明 5.小结 6.主要参考文献1. 前言 这是本人写的第一篇博客(2013年4月5日发在cnblogs上,现在迁移过来)&#…

Julia语言:让高性能科学计算人人可用

摘要&#xff1a;一群科学家对现有计算工具感到不满&#xff1a;他们想要一套开源系统&#xff0c;有C的快速&#xff0c;Ruby的动态&#xff0c;Python的通用&#xff0c;R般在统计分析上得心应手&#xff0c;Perl的处理字符串处理&#xff0c;Matlab的线性代数运算能力……易…

View Animation

转载一篇关于view animation的文章 http://blog.csdn.net/nerohoop/article/details/7245909 补充&#xff1a;当启用animation来改变值的时候&#xff0c;值是立刻就改变了的&#xff0c;然后才开始动画。 转载于:https://www.cnblogs.com/mystory/archive/2012/12/18/2824029…

编程能力的四种境界

人类心理学研究中的一个基础支撑科目就是分析人的潜意识和意识。 弗洛伊德是最早的一位能够清楚的认定和描述我们的心理活动“领域”的人。 在他这著名的一生的早期&#xff0c;他就指出我们的意识里分“潜意识”&#xff0c;“前意识”&#xff0c;“意识”。 如 果我们想能清…

ファイルアップロード関連のjQueryプラグイン10攻略

ファイルアップロード関連のjQueryプラグイン&#xff11;&#xff10;ファイルアップロードといってもSWFを使ったりAJAXを使ったりと方法が色々あって、いろんなやり方ができるjQueryプラグインです。望みの挙動に近いものを選んでカスタマイズすれば作りたいものが最速で作れ…

HTTP报文(转)

HTTP报文http://www.cnblogs.com/kissdodog/archive/2013/04/01/2993228.html之前写过一篇HTML报文&#xff0c;但是感觉写完之后还是不懂&#xff0c;最近终于有时间开始看《HTTP权威指南》&#xff0c;看完之后觉得还是比之前的理解更加深入了&#xff0c;提取HTTP报文出来做…

C#基础-应用程序域

文章导读同一台计算上的应用程序是通过进程来隔离的&#xff0c;每个应用程序都是加载到不同的进程中&#xff0c;从而达到应用程序的互不影响。操作系统【OS】通过进程控制块【PCB】感知进程的存在&#xff0c;分析【PCB】的数据结构可以发现&#xff0c;【PCB】维护进程运行的…

Java生鲜电商平台-微服务入门与服务的拆分架构实战

Java生鲜电商平台-微服务入门与服务的拆分架构实战 刚开始进入软件行业时还是单体应用的时代&#xff0c;前后端分离的概念都还没普及&#xff0c;开发的时候需要花大量的时间在“强大”的JSP上面&#xff0c;那时候SOA已经算是新技术了。现在&#xff0c;微服务已经大行其道&a…