flex项目深入分析

来源:http://www.chinese-glasses.com 作者:Web前端 人气:91 发布时间:2020-04-22
摘要:CSS: 参考 深入理解 flex布局以及计算 最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-width:0;但是在我的尝

CSS:

参考

深入理解 flex 布局以及计算

最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下,依然不行,原来在上层父级就是flex那一级别也需要设置 min-width:0; 就是可以理解为 省略号标签的flex-item以及所在的flex父级 都需要设置min-width:0;

伸展和坍塌

div  div  img src="-touch-icon.png" / div  div 很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字/div div 社区小商城/div /div /div div  div  div 568/div div 粉丝数/div /div div  div 1898/div div 购买指数/div /div /div /div
flex container
  • min-width[min-height]10bet, > flex container 值
  • min-width[min-height] > flex container(优先级)

时间: 2019-09-22阅读: 167标签: flex

总结:
  1. width:auto、width:非auto、flex、min-width[min-height]、max-width[height]和flex-basis两两比较时取最大值
  2. width:非auto 和 flex-basis(优先级)同时设置时,width:非auto < flex-basis(优先级)

HTML:

max-width[height]
  • Flex-basis < max-width[height] 值
  • Flex-basis < max-width[height](优先级)--通过flex-grow伸展开。
.flex { display: flex; align-items: center; align-content: center; justify-content: space-between; min-width: 0; /* 这里也要设置 */}.flex__item { min-width: 0; /* 这里需要设置 */}.flex__item--fixed { flex: 0 0 auto;}.fs--ellip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .home-shop { max-width: 750px;}.home-shop__img { width: 98px; height: 98px; }.home-shop__main { padding: 0 36px 0 18px;}.home-shop__fans { padding: 16px 16px 16px 26px; border-left: 2px solid #eee;}

flex-item-size 如何计算的

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

FFC (flex formatting context)

  • Flexbox 布局新定义了格式化上下文,类似 BFC(block formatting context)
  • 注意 : 我所指的Flexbox 是指设置了 display: flex; 或 display: inline-flex;的盒子。不是指单单设置了 display: flex; 的盒子。
  • 例如,设置了 display: flex; 或 display: inline-flex的元素,和BFC一样,不会被浮动的元素遮盖,不会垂直外边距坍塌等等。
1. Flex-item总和 < flex-box时
  • flex-grow计算流程是:
  • 可用空间 = flexbox-content - 每个item-size的总和
  • 单位分配空间 = 可用空间 / grow
  • 每个item延伸的尺寸 = 单位分配空间 * 对应的item grow
  注意:flex-shrink 的计算流程和flex-grow的计算流程不同。

三种情况

  1. flex-basis > width[height]: 非auto(没有元素默认值和内容); (优先级)
  2. width:auto、width:非auto和flex-basic(优先级比较)
    • width:auto < flex-basis值
    • width:auto < flex-basis(优先级)
    • width:auto > flex-basis值
    • width:auto > flex-basis(优先级)
    • width:非auto < flex-basis(优先级)
  3. min-width[height]、max-width[height]、flex-basis和flex container(父元素容器尺寸)(优先级比较)

    ###### min-width[min-height]

    • flex-basis > min-width[min-height] 值
    • flex-basis > min-width[min-height](优先级)
    • flex-basis < min-width[min-height] 值
    • flex-basis < min-width[min-height](优先级)
2. min-width[height] 情况下 flex-shrink 的计算流程
  • 第一次坍塌
  • 按正常的flex-shrink 的计算流程,计算出每个item坍塌后的尺寸
  • item没有坍塌的尺寸 = 带min-width[height]属性的item-size - item坍塌后的尺寸
  • item最终尺寸 = 每个没有带min-width[height]属性的item坍塌后的尺寸 - 每个item的flex-shrink(item没有坍塌的尺寸 / item的flex-shrink之和)

隐藏属性对 items-size 的影响

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

本文由10bet发布于Web前端,转载请注明出处:flex项目深入分析

关键词:

最火资讯