flex: 1有什么用?

在现代网页设计领域,实现动态和响应式布局至关重要。这就是 Flexbox 的用武之地!Flexbox 具有直观的属性,使开发人员能够轻松制作多功能布局。这个强大工具的核心是 flex 属性,它是打开控制容器内元素行为的无限可能性的钥匙。
flex 属性是一个简写 ,结合了三个子属性的功能:
  • flex-grow:此属性决定元素在容器剩余空间内增长的能力。默认情况下,它设置为 0,表示元素不会超出其初始大小。但是,当分配正数时,它使元素能够按比例扩展到其他弹性项目。
  • flex-shrink:在有限空间的舞蹈中,flex-shrink 发挥作用。它决定了当容器没有呼吸空间时元素应该收缩多少。它的默认值 1 启用比例收缩,将其设置为 0 可防止元素收缩,保持其位置。
  • flex-basis:将此属性想象为元素的初始阶段存在。它在任何剩余空间分配魔法发生之前设置元素的基本大小。默认情况下,自动占主导地位,允许元素接受其内容的自然大小。但是,您可以设置特定值来指导初始空间分配。
将 flex 属性设置为 1 ,相当于授予其 flex 容器内可用空间的平等份额。
  • flex-grow: 1:这使元素能够扩展并占据任何可用空间的公平份额。
  • flex-shrink: 1:这样,当空间变得稀缺时,元素会优雅地与其同类元素一起收缩,从而保持布局的和谐。
  • flex-basis: 0%:这确保在进行任何空间分配之前,元素从干净的状态开始,不会在其内容之外占用任何额外空间。
应用:

浏览网站是一种基本的用户体验,这就是 flex: 1 真正闪耀的地方!想象一下制作一个导航栏,其中的项目无论屏幕大小如何,都可以优雅地调整并均匀分布。

javascript 复制代码
<nav class="navbar">  
	<a href="#">Link 1</a>  
	<a href="#">Link 2</a>  
	<a href="#">Link 3</a>
</nav>

.navbar {  
	display: flex;
}
.navbar a {  
	flex: 1;  
	border: 1px solid #ccc;  
	padding: 10px;  
	text-align: center;
}

通过将每个链接的 flex 属性设置为 1,我们确保它们和谐地共享导航栏的可用宽度。随着屏幕尺寸在桌面、平板电脑和移动设备之间变化,链接可以轻松适应,保持视觉吸引力和一致的用户体验。

探索其他 Flex 值
  • flex: 0:此设置可控制元素的内容或任何定义的宽度。它不会自动拉伸以填充剩余空间。
  • flex: none:此值锁定元素的大小,防止其增大或缩小。当您需要元素无论如何都保持特定大小时,它特别方便。
相关推荐
耶啵奶膘29 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro