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;
使用场景:
子元素根据内容自适应宽度。