flex属性设置详解
2017-10-15 10:31
260 查看
CSS代码中常见这样的写法:flex:1
这是
2. 当
3. 当
4. 当
5. 当
6. 当
7. 当
百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为
9. 举例
主轴上父容器总尺寸为 600px
子元素的总基准值(flex-basis)是:0% + auto + 200px = 300px,其中
故剩余空间为 600px - 300px = 300px
伸缩放大(flex-grow)系数之和为: 2 + 2 + 1 = 5
剩余空间分配如下:
各项目最终宽度为:
当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设
而 item-2 基准值取
文章来源: https://segmentfault.com/q/1010000004080910/a-1020000004121373
这是
flex的缩写:
flex-grow、
flex-shrink、
flex-basis,其取值可以考虑以下情况:
1. flex的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则
flex的默认值是 0 1 auto。同理,如下是等同的:
.item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; }
2. 当
flex取值为
none,则计算值为 0 0 auto,如下是等同的:
.item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
3. 当
flex取值为
auto,则计算值为 1 1 auto,如下是等同的:
.item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
4. 当
flex取值为一个非负数字,则该数字为
flex-grow值,
flex-shrink取 1,
flex-basis取 0%,如下是等同的:
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
5. 当
flex取值为一个长度或百分比,则视为
flex-basis值,
flex-grow取 1,
flex-shrink取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):
.item-1 {flex: 0%;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .item-2 {flex: 24px;} .item-2 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px; }
6. 当
flex取值为两个非负数字,则分别视为
flex-grow和
flex-shrink的值,
flex-basis取 0%,如下是等同的
.item {flex: 2 3;} .item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%; }
7. 当
flex取值为一个非负数字和一个长度或百分比,则分别视为
flex-grow和
flex-basis的值,
flex-shrink取 1,如下是等同的:
.item {flex: 2333 3222px;} .item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px; }
8. flex-basis规定的是子元素的基准值,所以是否溢出的计算与此属性息息相关
flex-basis规定的范围取决于
box-sizing。这里主要讨论以下
flex-basis的取值情况:
auto:首先检索该子元素的主尺寸,如果主尺寸不为
auto,则使用值采取主尺寸之值;如果也是
auto,则使用值为
content。
content:指根据该子元素的内容自动布局。有的用户代理没有实现取
content值,等效的替代方案是
flex-basis和主尺寸都取
auto。
百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为
auto一样。
9. 举例
<div class="parent"> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> </div> <style type="text/css"> .parent { display: flex; width: 600px; } .parent > div { height: 100px; } .item-1 { width: 140px; flex: 2 1 0%; background: blue; } .item-2 { width: 100px; flex: 2 1 auto; background: darkblue; } .item-3 { flex: 1 1 200px; background: lightblue; } </style>
主轴上父容器总尺寸为 600px
子元素的总基准值(flex-basis)是:0% + auto + 200px = 300px,其中
- 0% 即 0 宽度 - auto 对应取主尺寸即 100px
故剩余空间为 600px - 300px = 300px
伸缩放大(flex-grow)系数之和为: 2 + 2 + 1 = 5
剩余空间分配如下:
- item-1 和 item-2 各分配 2/5,各得 120px - item-3 分配 1/5,得 60px
各项目最终宽度为:
- item-1 = 0% + 120px = 120px - item-2 = auto + 120px = 220px - item-3 = 200px + 60px = 260px
当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设
而 item-2 基准值取
auto的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间
文章来源: https://segmentfault.com/q/1010000004080910/a-1020000004121373
相关文章推荐
- Android textAppearance的属性设置及TextView属性详解
- Flex中如何通过errorString属性在CheckBox控件上设置一个错误信息显示字符串的例子
- Flex中通过设置headerHeight属性设置DataGrid控件头部高度的例子
- CSS3 Flex布局 Flexbox的属性详解
- ListView 的属性设置详解
- Android textAppearance的属性设置及TextView属性详解
- Android textAppearance的属性设置及TextView属性详解
- CSS3 弹性布局弹性流(flex-flow)属性详解和实例
- Flex DataGrid的方法和属性详解
- 详解html中background-image属性的设置
- UILable属性详解,设置居上对齐,居中对齐,居下对齐,获取斜体字,字体、大小、单位、颜色
- Flex设置form表单一些属性设置
- Android textAppearance的属性设置及TextView属性详解
- CSS background属性之背景设置详解
- Android 通过Java代码生成创建界面。动态生成View,动态设置View属性。addRules详解
- Flex中如何通过设置restrict属性在TextInput控件中限制用户可以输入的字符串的例子
- MPAndroidChart3.0使用详解(一)----基本属性设置
- Android textAppearance的属性设置及TextView属性详解
- 详解spring: 事务属性的设置
- 设备树详解 (借点引用, &... , 结构, 节点属性设置如gpio的上拉,下拉,io中断设置等 )