【CSS】“flex: 1“有什么用?

news2024/11/8 8:26:01

flex 属性的组成

flex 属性是一个复合属性,包含以下三个子属性:

  1. flex-grow:决定元素在容器中剩余空间的分配比例。默认值为 0,表示元素不会扩展。当设置为正数时,元素会按照设定比例扩展。
  2. flex-shrink:决定元素在空间不足时的收缩比例。默认值为 1,表示元素会按比例收缩。当设置为 0 时,元素不会收缩。
  3. flex-basis:定义元素在分配多余空间之前所占据的主轴空间。默认值为 auto,表示元素占据其本来大小。

语法格式为:

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

理解flex: 1的作用

将一个元素的 flex 属性设置为 1,相当于将其分配了一个相对于其他元素相同的可伸缩空间。换句话说,flex: 1 会使该元素尽可能地占据父容器中的剩余空间,同时保持其他元素的相对位置和大小。

具体来说:

flex: 1; /* 等同于 flex: 1 1 0%; */
  • flex-grow 设置为 1,表示元素会扩展,填满所有可用的额外空间。
  • flex-shrink 设置为 1,表示元素会在空间不足时收缩,避免溢出。
  • flex-basis 设置为 0%,表示元素在分配额外空间前不占用空间。

实际应用示例

这种设置对于实现灵活、响应式的布局非常有用。例如,我们可以将导航栏中的项目设置为 flex: 1,使其自动平分导航栏的宽度。

HTML 结构:

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

CSS 样式:

.navbar {
  display: flex;
}

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

在这个示例中,通过设置链接的 flex 属性为 1,实现了它们的平均分配。无论导航栏的宽度如何变化,链接都会自动调整大小,以适应父容器的空间。

更多

比较 "flex: 1" 与其他值:

  • flex: 1 是最常用的设置,因为它能让子元素自动填充剩余空间,使布局更灵活。等价于flex: 1 1 0%
  • flex: 0 表示子元素不会自动填充剩余空间,而是根据其内容或固定尺寸进行布局。等价于flex: 0 1 0%
  • flex: none 则表示子元素不可伸缩,其大小仅受 flex-basis 限制,不会根据剩余空间自动调整。等价于flex: 0 0 auto

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【dvwa靶场:XSS系列】XSS (Stored)低-中-高级别,通关啦

更改name的文本数量限制大小&#xff0c; 其他我们只在name中进行操作 【除了低级可以在message中进行操作】 一、低级low <script>alert("假客套")</script> 二、中级middle 过滤了小写&#xff0c;咱们可以大写 <Script>alert("假客套…

大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

神经网络基础--什么是正向传播??什么是方向传播??

前言 本专栏更新神经网络的一些基础知识&#xff1b;这个是本人初学神经网络做的笔记&#xff0c;仅仅堆正向传播、方向传播就行了了一个讲解&#xff0c;更加系统的讲解&#xff0c;本人后面会更新《李沐动手学习深度学习》&#xff0c;会更有详细讲解;案例代码基于pytorch&a…

【大模型系列】Grounded-VideoLLM(2024.10)

Paper&#xff1a;https://arxiv.org/pdf/2410.03290Github&#xff1a;https://github.com/WHB139426/Grounded-Video-LLMHuggingface&#xff1a;https://huggingface.co/WHB139426/Grounded-Video-LLMAuthor&#xff1a;Haibo Wang et al. 加州大学&#xff0c;复旦 动机&a…

IDEA2024下安装kubernetes插件并配置进行使用

【1】安装插件 其实2024.2.3下默认已经安装了kubernetes插件&#xff0c;如果你发现自己IDEA中没有&#xff0c;在市场里面检索并下载即可。 【2】kubernetes配置 ① 前置工作 首先你要准备一个config文件和一个kubectl.exe 。 config文件类似如下&#xff1a; apiVersi…

onnx-web + yolov8n 在视频流里做推理

顺着我上一篇文章 使用onnxruntime-web 运行yolov8-nano推理 继续说&#xff0c;有朋友在问能不能接入 视频流动&#xff0c;实时去识别物品。 首先使用 getUserMedia 获取摄像头视频流 getUserMedia API 可以访问设备的摄像头和麦克风。你可以使用这个 API 获取视频流&#…

Python练习11

Python日常练习 题目&#xff1a; 编写一个石头剪刀布游戏&#xff0c;该程序要求完成如下功能&#xff1a; (1) 显示游戏规则&#xff0c;提醒用户输入一个1-3的整数或者直接回车。 用户输入回车时游戏结束。 用户输入不合法&#xff08;包括输入的…

航展畅想:从F35机载软件研发来看汽车车载软件研发

两款经典战机的机载软件 F-22和F-35战斗机的研制分别始于1980年代和1990年代末&#xff0c;F-22项目在1981年启动&#xff0c;主要由洛克希德马丁&#xff08;Lockheed Martin&#xff09;和波音公司&#xff08;Boeing&#xff09;合作开发&#xff0c;以满足美军“先进战术战…

实践出真知:MVEL表达式empty的坑

目录标题 背景为什么呢&#xff1f;验证下empty的含义case1case2case3 结论具体解释&#xff1a; 背景 //是否白名单 if(goodInfo.?isWhite ! empty){showList.add(["label": "是否白名单","value":["text":(goodInfo.?isWhite tr…

RPC核心实现原理

目录 一、基本原理 二、详细步骤 三、额外考虑因素 RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种计算机通信协议&#xff0c;也是一种用于实现分布式系统中不同节点之间进行通信和调用的技术。其实现原理主要可以分为以下几个步骤&…

Kaggle生物信息学挑战:酶稳定性预测大赛

背景介绍 酶的稳定性是影响其实际应用的关键因素之一。通过定点突变可以改善酶的稳定性,但实验筛选稳定性突变体的成本较高。预测突变对酶稳定性的影响,加速筛选稳定性更高的酶突变体。 概念解释 X 残基&#xff1a;假设 它用 红色表示 &#xff0c; Y 残基&#xff1a;假设…

【开发工具——依赖管理工具——Maven】

1. Maven介绍 Apache Maven 的本质是一个软件项目管理和理解工具。基于项目对象模型 (Project Object Model&#xff0c;POM) 的概念&#xff0c;Maven 可以从一条中心信息管理项目的构建、报告和文档。 对于开发者来说&#xff0c;Maven 的主要作用主要有 3 个&#xff1a; …

vue3+vite搭建脚手架项目本地运行electron桌面应用

1.搭建脚手架项目 搭建Vue3ViteTs脚手架-CSDN博客 2.创建完项目后&#xff0c;安装所需依赖包 npm i vite-plugin-electron electron26.1.0 3.根目录下创建electron/main.ts electron/main.ts /** electron/main.ts */import { app, BrowserWindow } from "electron&qu…

鸿蒙ArkTS中的获取网络数据

一、通过web组件加载网页 在C/S应用程序中&#xff0c;都有网络组件用于加载网页&#xff0c;鸿蒙ArkTS中也有类似的组件。   web组件&#xff0c;用于加载指定的网页&#xff0c;里面有很多的方法可以调用&#xff0c;虽然现在用得比较少&#xff0c;了解还是必须的。   演…

无人车之路径规划篇

无人车的路径规划是指在一定的环境模型基础上&#xff0c;给定无人车起始点和目标点后&#xff0c;按照性能指标规划出一条无碰撞、能安全到达目标点的有效路径。 一、路径规划的重要性 路径规划对于无人车的安全、高效运行至关重要。它不仅能够提高交通效率&#xff0c;减少交…

C语言心型代码解析

方法一 心型极坐标方程 爱心代码你真的理解吗 笛卡尔的心型公式&#xff1a; for (y 1.5; y > -1.5; y - 0.1) for (x -1.5; x < 1.5; x 0.05) 代码里面用了二个for循环&#xff0c;第一个代表y轴&#xff0c;第二个代表x轴 二个增加的单位不同&#xff0c;能使得…

11月7日(内网横向移动(二))

利用系统服务 SCShell SCShell是一款利用系统服务的无文件横向移动工具。与传统的创建远程服务的方法不同&#xff0c;SCShell利用提供的用户凭据&#xff0c;通过ChangeServiceConfigA API修改远程主机上的服务配置&#xff0c;将服务的二进制路径名修改为指定的程序或攻击载…

【YOLOv11[基础]】目标检测OD | 导出ONNX模型 | ONN模型推理以及检测结果可视化 | python

本文将导出YOLO11.pt模型对应的ONNX模型,并且使用ONNX模型推理以及结果的可视化。话不多说,先看看效果图吧!!! 目录 一 导出ONNX模型 二 推理及检测结果可视化 1 代码 2 效果图

力扣—不同路径(路径问题的动态规划)

文章目录 题目解析算法原理代码实现题目练习 题目解析 算法原理 状态表示 对于这种「路径类」的问题&#xff0c;我们的状态表示⼀般有两种形式&#xff1a; i. 从[i, j] 位置出发。 ii. 从起始位置出发&#xff0c;到[i, j] 位置。 这⾥选择第⼆种定义状态表⽰的⽅式&#xf…

传统RAG流程;密集检索器,稀疏检索器:中文的M3E

目录 传统RAG流程 相似性搜索中:神经网络的密集检索器,稀疏检索器 密集检索器 BGE系列模型 text-embedding-ada-002模型 M3E模型 稀疏检索器 示例一:基于TF-IDF的稀疏检索器 示例二:基于BM25的稀疏检索器 稀疏检索器的特点与优势 传统RAG流程 相似性搜索中:神经…