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;

使用场景:

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

相关推荐
程序员的世界你不懂5 分钟前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 分钟前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip15 分钟前
JavaScript二叉树相关概念
前端
rannn_11130 分钟前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x1 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java1 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)1 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术2 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫2 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css