flex 布局的深入研究
对于flex盒模型的设计期望
flex盒模型是被期望设计成
1:在任何流动的方向上(包括上下左右)都能进行良好的布局
2:可以以逆序 或者 以任意顺序排列布局
3:可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列
4:可以弹性的在任意的容器中伸缩大小
5:可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐著作权归作者所有。
6:可以动态的 沿着主轴方向 伸缩子级的尺寸,与此同时保证父级侧轴方向上的尺寸著作权归作者所有。
主轴和侧轴
很有必要先向大家解释清楚 3个问题
什么是主轴?
什么是侧轴?
他们是如何切换的?
首先每一根轴都包括 三个东西:维度、方向、尺寸
什么意思呢?
1:所谓的维度实际上就是意思就是子元素 横着排还是竖着排(x
轴 或 y
轴)
2:方向 即排列子元素的顺序 顺序还是逆序
3:尺寸 即width
[height
] : 每一个子元素在主轴方向所占的位置的总和 如果主轴是水平的,那么尺寸就是父元素内所有item
的outerWidth
总和,如果主轴是垂直的,那么尺寸就是父元素的outerHeight
著作权归作者所有。
主轴是依靠 flex-direction
和 所有子元素在主轴方向上的item-size
的总和确定的,flex-direction
这个属性可以控制子元素的排列方向和排列顺序。
侧轴是依靠 flex-wrap
和 所有子元素在主轴方向上的item-size
的总和确定的,flex-wrap
可以控制子元素 在侧轴方向上的排列方式以及顺序。
而关于不同种类不同情况下的 item-size
我们会在下面讨论,现在您可以简单将它理解为width
[height
]。
flex-direction + flex-wrap
合并成了一个属性:
flex-flow
通过这个简单而复杂的属性,我们就能够控制所有子元素的水平和垂直方向,逆序排列和顺序,换行和不换行。
主侧轴的切换十分简单,当主轴设定的时候,它的垂直面,就默认被设定成了侧轴
flex-flow: row-reverse wrap-reverse;
这条CSS属性能够告诉我们那些信息?
1:子元素是横着排列的,主轴是水平的横轴,侧轴是竖直的纵轴
2:子元素是逆序并沿着主轴排列的,从右到左
3:子元素是换行的
4:子元素是逆序并沿着侧轴排列的,从下到上
FFC (flex formatting context)
Flexbox 布局新定义了格式化上下文,类似 BFC(block formatting context)
PS:
注意 : 我所指的Flexbox 是指设置了 display: flex;
或 display: inline-flex;
的盒子。不是指单单设置了 display: flex;
的盒子。
例如,设置了 display: flex;
或 display: inline-flex
的元素,和BFC一样,不会被浮动的元素遮盖,不会垂直外边距坍塌等等。
而对于设置了 display: inline-flex
的盒子来说,我们可以类比 display: inline-box;
行理解。即 一个被行列化后的 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
的尺寸。
在规范中 介绍了 flex-item content 的计算方式
分为以下这几种情况
1. flex-basis 的优先级比 width[height]: 非auto; 高
如果子元素没有内容和默认固定宽高,且设置了flex-basis
。flex-item content
以flex-basis
来决定,无论width[height]
设置了多少
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
计算。
min-width[min-height]
的值已经超出了容器的尺寸,那么即使设置了 flex-shrink
。 CSS解析器也不会进行将这个item
的 content shrink,而是坚持保留它的
min-width[min-height]
如果Flexbox 设置的min-width
超出了flex container 的范围, 不会对其进行压缩。
反之,如果设置了 max-width[height]
的值,那么设置flex-basis
无法超过这个值,对于flex-grow
也仅仅只会增长到 max-width[height]
这个上限。
最新文章
- 百度地图隐藏BMKAnnotationView
- Android 利用ImageView显示图片
- mac版Camtasia 2.10破解
- [问题2015S05] 复旦高等代数 II(14级)每周一题(第六教学周)
- 最短路径算法之Dijkstra算法(java实现)
- 传智播客JavaWeb day01 快捷键、XML
- 通过FileWatcher,监听通过web上传的图片,并进行压缩
- HDU 1255 覆盖的面积 (线段树+扫描线+离散化)
- Fast特征检测
- Vijos: P1046观光旅游
- Yahoo前端优化十四条军规
- 日历组件的使用,bootstrap-datetimepicker
- zeroc
- LeetCode 404. Sum of Left Leaves (左子叶之和)
- 利用airbase-ng建立Soft AP
- 【Spring】22、Spring缓存注解@Cache使用
- Java断言绝对不是鸡肋
- 我的IT未来
- read 命令
- <;泛>; 并查集