码迷,mamicode.com
首页 > 其他好文 > 详细

flex

时间:2019-12-03 15:32:25      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:元素   data   ini   row   initial   bsp   shrink   组合   tab   

 

让所有弹性盒模型对象的 子元素都有相同的长度,且忽略它们内部的内容:
#main div { flex:1; }
子元素长度相同
 
定义和用法
flex 子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。
   
   
   
   
   
 
 
CSS 语法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
属性值
   
   
   
   
   
   
   
   
 
 
 
 
flex 是 flex-grow、flex-shrink、flex-basis的缩写
 
flex 的默认值是以上三个属性值的组合,flex 的默认值是 0 1 auto。
 
当 flex 取值为 none,则计算值为 0 0 auto;
 
当 flex 取值为 auto,则计算值为 1 1 auto;
 
当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:
 
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情况
 
 
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
 
当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%,如下是等同的:
 
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1,如下是等同的:
 
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}
flex-basis 规定的是子元素的基准值。

flex

标签:元素   data   ini   row   initial   bsp   shrink   组合   tab   

原文地址:https://www.cnblogs.com/iOS-mt/p/11976980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!