flex: 1有什么用？

云隙阳光i

已于 2025-03-02 21:44:10 修改

阅读量480

点赞数 4

文章标签： css css3 前端

于 2024-09-01 17:05:31 首次发布

本文链接：https://blog.youkuaiyun.com/preoccupied_/article/details/141786576

版权

在现代网页设计领域，实现动态和响应式布局至关重要。这就是 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 真正闪耀的地方！想象一下制作一个导航栏，其中的项目无论屏幕大小如何，都可以优雅地调整并均匀分布。

<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;
}