“flex: 1”有什么用？

• flex-grow：此属性决定元素在容器剩余空间内增长的能力。默认情况下，它设置为 0，表示元素不会超出其初始大小。但是，当分配正数时，它使元素能够按比例扩展到其他弹性项目。想象一下它是一种拉伸超能力！
• flex-shrink：在有限空间的舞蹈中，flex-shrink 发挥作用。它决定了当容器没有呼吸空间时元素应该收缩多少。它的默认值 1 启用比例收缩——想想元素如何优雅地调整其大小以避免溢出混乱！将其设置为 0 可防止元素收缩，保持其位置。
• flex-basis：将此属性想象为元素的初始阶段存在。它在任何剩余空间分配魔法发生之前设置元素的基本大小。默认情况下，自动占主导地位，允许元素接受其内容的自然大小。但是，您可以设置特定值来指导初始空间分配。

flex: <flex-grow> <flex-shrink> <flex-basis>;

揭秘 flex :1 的魔力

将 flex 属性设置为 1 ，相当于授予其 flex 容器内可用空间的平等份额。这就像说，“嘿，你们所有人都可以公平地分享这个空间！”。让我们分解一下幕后发生的事情：

flex: 1; /* This is equivalent to flex: 1 1 0%; */

• flex-grow: 1：这使元素能够扩展并占据任何可用空间的公平份额。
• flex-shrink: 1：这样，当空间变得稀缺时，元素会优雅地与其同类元素一起收缩，从而保持布局的和谐。
• flex-basis: 0%：这确保在进行任何空间分配之前，元素从干净的状态开始，不会在其内容之外占用任何额外空间。

真实世界应用：导航栏交响曲 

浏览网站是一种基本的用户体验，这就是 flex: 1 真正闪耀的地方！

想象一下制作一个导航栏，其中的项目无论屏幕大小如何，都可以优雅地调整并均匀分布。听起来很神奇吗？让我们把它变成现实：

HTML 结构：

<nav class="navbar">  <a href="#">Link 1</a>  <a href="#">Link 2</a>  <a href="#">Link 3</a></nav>

CSS 样式：

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

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

探索其他 Flex 值 

虽然 flex: 1 因其灵活性和适应性而广受欢迎，但了解其他值可以让您进一步微调布局：

• flex: 0：此设置可控制元素的内容或任何定义的宽度。它不会自动拉伸以填充剩余空间。可以将其视为一种“保持在自己的车道上”的方法。
• flex: none：此值锁定元素的大小，防止其增大或缩小。当您需要元素无论如何都保持特定大小时，它特别方便。将其视为“不屈服”选项。

结论 

掌握 flex 属性及其子属性，可以解锁网页设计中的无限创意可能性。

通过了解 flex-grow、flex-shrink 和 flex-basis 之间的相互作用，您将获得制作动态、响应迅速且视觉上有吸引力的布局的工具，这些布局可以无缝适应不同的屏幕尺寸和内容变化。

继续尝试，继续发挥您的创造力，并观察您的网页设计以无与伦比的灵活性和优雅度呈现！

admin普通

收藏 海报 链接