flex

Posted 2020-11-24 ios-mt

 

让所有弹性盒模型对象的 子元素都有相同的长度，且忽略它们内部的内容：

#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 规定的是子元素的基准值。