css flex

时间：2017-07-26 17:47:56 阅读：175 评论：0 收藏：0 [点我收藏+]

1. 定义

　　flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

　　flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

　　注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

2. 语法

　flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

　　- flex-grow

　　指定该项相对于同一容器中其他灵活项的增长程度。默认值为0。test

　　技术分享

　　- flex-shrink

　　指定该项相对于同一容器中其他灵活项的收缩程度。默认值为1。

　　flex环境默认是不换行的，容器长度不够分配时会压缩子元素。

　　根据文章深入理解 flex-grow & flex-shrink & flex-basis 中给出的计算方法，

　　box1压缩值 = (200*2) / （200*2 + 160*1） * 60 ≈ 42.86

　　box1最终宽度 = 200 - 42.86 = 157.14 √

　　box2压缩值 = （160*1） / (200*2 + 160*1) * 60 ≈ 17.14

　　box2最终宽度 = 160 - 17.14 = 142.86 √

　　两个值通过文章所说的方法都计算正确，但具体为什么要这样计算呢，暂时还没找到比较官方的说明。

　　- flex-basis

　　指定flex容器中子项的初始长度。默认值为auto。

　　技术分享

　　添加右边样式后，剩余长度按1:1分配，即

　　box1宽度： 200 + 40/2 = 220

　　box2宽度： 60 + 40/2 = 80

3.兼容性

　　详情查询 can i use

参考：

原文地址：http://www.cnblogs.com/suiyueshentou/p/7238770.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行