flex常用固定搭配

flex常用固定搭配

flex简写：flex-grow（项目放大），flex-shrink （项目缩小），flex-basis（项目本身）

• flex: 1;

全写：flex: 1 1 0%;内容自动放大或缩小占满剩余空间，优先最小的。

1、子元素都设置flex: 1; 子元素盒子会平分并占满父盒子，使用场景：每个子元素有相同的宽度，平分整个可用空间；

.parent {
display: flex;
}
.son{
flex:1;
}

2、一个元素宽度（或高度）固定，另一个元素宽度（或高度）自适应。

.parent {
display: flex;
}
.son1 {
width: 200px; //或者 height: 200px;
}
.son2 {
flex: 1; // flex: 1 1 0%;
}

• flex:auto

全写：flex: 1 1 auto;

使用场景:

子元素根据内容自适应宽度。