CSS3 Flex计算逻辑
来源:互联网 发布:如何添加手机淘宝 编辑:程序博客网 时间:2024/05/21 04:23
Flex样式
Flex: flex-grow | flex-shrink | flex-basis
- flex-grow:纯数字,表示增长因子。默认值为0,表示按元素的原大小显示。
- flex-shrink:纯数字,表示收缩因子。默认值是1,如果是0则按原始大小显示。当屏幕或容器变小时,不同元素的收缩比例可能与容器变大的逻辑是不一样的,所以会有这个属性。
- flex-basis:表示flex-item(flexbox容器内的子元素)的原始大小,如果没有这个属性,默认使用flex-item的内容大小。这个属性相当于flex-item的width属性。
Flex-grow计算逻辑-横向展开
以下计算步骤只适用于当横向展开时flexbox容器宽度大于所有子元素的宽度时:
1. 首先算出flexbox容器内所有子元素的原始宽度总和initial_space。
2. 用flexbox容器的总宽度减去initial_space,得到flexbox容器内剩余空间remained_space。
3. 获取flexbox容器中有flex-grow属性的子元素,算出flex-grow的总和grow_total。
4. Flew-grow=0的元素默认按原大小显示。
5. Flew-grow>0的元素,宽度=原宽度+ flexgrow/grow_tatal*remainded_space。
Flex-shrink计算逻辑
以下计算步骤只适用于当横向展开时flexbox容器宽度小于所有子元素的宽度时:
1. 首先算出flexbox容器内所有子元素的原始宽度总和initial_space。
2. 用initial_space减去flexbox容器的总宽度,得到超出flexbox容器的那部分空间over_space。
3. 获取flexbox容器中flex-shrink>0的子元素,算出flex-shrink的总和shrink_total。
4. Flew-shrink=0的元素默认按原大小显示。
5. Flew-shrink>0的元素,宽度=原宽度-flexshrink/shrink_tatal*over_space。
Flex-basis计算逻辑
- 如果子元素有flex-basis,就算作子元素的原始width(不包括边框和补边)。
- 如果子元素没有flex-basis,但有width属性,则使用width作为flex-basis。
- 如果flex-basis:content,表示默认使用元素内容大宽度。
0 0
- CSS3 Flex计算逻辑
- css3 flex
- css3 flex
- 【css3】flex
- css3--flex
- css3-box-flex布局
- CSS3属性box-flex
- css3--display:flex;
- CSS3 弹性布局Flex
- 浅撸 css3 flex 布局
- css3中的flex布局
- CSS3 box-flex 属性
- CSS3 box-flex 属性
- css3-flex-ONE
- css3-flex-two
- Css3的Flex属性
- css3 flex兼容性
- css3 flex 布局理解
- vofuria的开发(4)更换目标图片(target)
- R时间序列分析
- 原生javascript实现图片轮播效果——续
- L2-003. 月饼
- 把数组排成最小的数
- CSS3 Flex计算逻辑
- R时间序列分析包综合
- servlet基础
- HTML5中canvas画图之画圆形
- R随机生成数据并打乱排序
- 替换空格(将字符串中的空格替换为20%)
- R网格MIC与频繁项集
- POJ 1947 Rebuilding Roads(树形DP)
- 用JSON备份还原短信时特殊字符的处理