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;

使用场景:

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

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript