当前位置： 首页 > news >正文

CSS之flex布局

news 2026/2/9 19:03:01

flex布局

CSS的Flex布局（Flexible Box Layout）是一种用于在页面上布置元素的高效方法，特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间，可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。

flex布局包括flex容器和flex项

  • flex容器属性

    1.display: flex | inline-flex：启用flex布局。 flex作为块级弹性伸缩盒显示;inline-flex 作为内联块级弹性伸缩盒显示。
    2.flex-direction: row | row-reverse | column | column-reverse：决定主轴的方向。
    3.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly：设置主轴上的对齐方式。
    4.align-items: stretch | flex-start | flex-end | center | baseline：设置交叉轴上的对齐方式。
    5.align-content: stretch | flex-start | flex-end | center | space-between | space-around：多行Flex项在交叉轴上的对齐方式（单行无效）。
    6.flex-wrap: nowrap | wrap | wrap-reverse：设置flex项是否可以换行。
    7.flex-flow：flex-direction 和 flex-wrap 的简写。

  • flex项属性
    1.flex-grow：定义flex项的放大比例。
    2.flex-shrink：定义flex项的缩小比例。
    3.flex-basis：定义flex项在分配多余空间之前的默认大小。
    4.flex：flex是flex-grow, flex-shrink和flex-basis的简写。
    5.align-self：允许单个flex项有与其他项不一样的对齐方式，覆盖align-items。

举个例子

代码示例

 <body><div class="flex-container"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}</style>

渲染示例：
在这里插入图片描述

易混淆属性总结

1.flex-grow

设置 flex 项主尺寸的 flex 增长系数，负值无效，默认为 0。flex-grow 分配剩余空间即 flex 容器的大小减去所有 flex 项的空间；

剩余空间 = 容器空间 - 所有flex项所占空间；

<body><div class="flex-container"><div class="flex-item item1"></div><div class="flex-item item2"></div><div class="flex-item item3"></div><div class="flex-item item4"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}.item1 {flex-grow: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}</style>

在这里插入图片描述
同理，有多个元素设置不同的flex-grow数值，则按照比例分配剩余空间。

2. flex-basis

指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

 .flex-item {flex-basis: 50px;height: 100px;background-color: lightblue;}.item1 {flex-basis: max-content;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述

3. flex-shrink

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。负值不允许。默认值 1，在默认情况下flex项宽度加一块超出容器时，会等比例缩小。

.flex-item {width: 180px;height: 100px;background-color: lightblue;flex-shrink: 0;}.item1 {flex-shrink: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述
box1宽度 = 600 - 180 * 3 = 60；同理，有多个元素设置不同的flex-shrink数值，则按照比例分配空间。

4. flex:1 | 0 | auto | none

flex属性是flex-grow、flex-shrink、flex-basis三个属性的简写，默认值是flex: 0 1 auto。默认有剩余空间，不会自动放大；超出时会等比例缩小。

  • flex:1是flex-grow: 1;flex-shrink: 1;flex-basis: 0%;的缩写。flex-basis 0%表示0，无尺寸，以实际内容宽度为主，会覆盖设置的width。

  • flex:0是flex-grow: 0;flex-shrink: 1;flex-basis: 0%;的缩写。

  • flex:auto是flex-grow: 1;flex-shrink: 1;flex-basis: auto;的缩写。

  • flex:none是flex-grow: 0;flex-shrink: 0;flex-basis: auto;的缩写。

5. display: flex | inline-flex

inline-flex
代码示例

<body><div class="flex-container"><div class="flex-item item1">1</div><div class="flex-item item2">2</div><div class="flex-item item3">3</div><div class="flex-item item4">4</div></div></body><style>.flex-container {height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 180px;height: 100px;background-color: lightblue;}.item1 {background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述
flex
代码

  display: flex;

在这里插入图片描述

相关文章：

CSS之flex布局

flex布局 CSS的Flex布局&#xff08;Flexible Box Layout&#xff09;是一种用于在页面上布置元素的高效方法&#xff0c;特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间&#xff0c;可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。 flex布局包括…...

编程日记 2024/2/13 21:22:43

UnityShader——02三大主流编程语言

三大主流编程语言 Shader Language Shader language的发展方向是设计出在便携性方面可以与C/JAVA相比的高级语言&#xff0c;“赋予程序员灵活而方便的编程方式”&#xff0c;并“利用图形硬件的并行性&#xff0c;提高算法的效率” Shader language目前主要有 3 种语言&…...

编程日记 2024/2/13 21:21:42

Centos7安装nginx yum报错

Centos7安装nginx yum报错&#xff0c;yum源报错解决办法&#xff1a; 1、更新epel源后&#xff0c;出现yum报错 [roothacker117 ~]# yum install epel-release&#xff08;安装成功&#xff09; [roothacker117 ~]# yum install nginx&#xff08;安装失败&#xff0c;提示如…...

编程日记 2024/2/13 21:19:40

【机组】基于FPGA的32位算术逻辑运算单元的设计（EP2C5扩充选配类）

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 一、实验目的 二、实验要求 …...

编程日记 2024/2/13 21:17:37

Asp .Net Core 系列：Asp .Net Core 集成 NLog

简介 NLog是一个基于.NET平台编写的日志记录类库&#xff0c;它可以在应用程序中添加跟踪调试代码&#xff0c;以便在开发、测试和生产环境中对程序进行监控和故障排除。NLog具有简单、灵活和易于配置的特点&#xff0c;支持在任何一种.NET语言中输出带有上下文的调试诊断信息…...

编程日记 2024/2/13 21:16:35

一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus

前言 今天给大家推荐一个基于.NET 7 Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架&#xff1a;DncZeus。 官方项目简介 DncZeus是一个基于 .NET 7 Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 Entity Framework…...

编程日记 2024/2/13 21:15:32

更换商品图片日期JSON格式报错 - 序列化与反序列化日期格式设置

报错信息 msg: “服务端异常&#xff0c;请联系管理员JSON parse error: Cannot deserialize value of type java.util.Date from String “2023-11-13 13:13:35”: not a valid representation (error: Failed to parse Date value ‘2023-11-13 13:13:35’: Cannot parse da…...

编程日记 2024/2/13 21:11:28

FastJson、Jackson使用AOP切面进行日志打印异常

FastJson、Jackson使用AOP切面进行日志打印异常 一、概述 1、问题详情 使用FastJson、Jackson进行日志打印时分别包如下错误&#xff1a; 源码&#xff1a; //fastjon log.info("\nRequest Info :{} \n"&#xff0c; JSON.toJSONString(requestInfo)); //jackson …...

编程日记 2024/2/13 21:10:26

嵌入式大厂面试题（2）—— 富士康

从本篇开始将会更新历年来各个公司的面试题与面经&#xff0c;题目来自于网上各个平台以及博主自己遇到的&#xff0c;如果大家有所帮助&#xff0c;帮忙点点赞和关注吧&#xff01; 岗位&#xff1a;嵌入式软件工程师。 面试时间&#xff1a;30分钟。 岗位职责&#xff1a;官网…...

编程日记 2024/2/13 21:06:20

力扣_字符串4—编辑距离

题目 给你两个单词 w o r d 1 word1 word1 和 w o r d 2 word2 word2&#xff0c; 请返回将 w o r d 1 word1 word1 转换成 w o r d 2 word2 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个字符 方法—动…...

编程日记 2024/2/13 21:04:18

MySQL篇----第二十篇

系列文章目录 文章目录 系列文章目录前言一、NULL 是什么意思二、主键、外键和索引的区别？三、你可以用什么来确保表格里的字段只接受特定范围里的值?四、说说对 SQL 语句优化有哪些方法？（选择几条）前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍…...

编程日记 2024/2/13 21:00:13

Promise 基础

Promise 基础 理解 抽象表达&#xff1a; Promise 是一门新的技术&#xff08;ES6 规范&#xff09;Promise 是 Js 中进行异步编程的新的解决方案&#xff08;旧方案是使用回调函数&#xff09; 具体表达 从语法上来说&#xff0c;Promise 是一个构造函数从功能上来说&#x…...

编程日记 2024/2/13 20:57:10

RPA财务机器人之UiPath实战 - 自动化操作Excel进行财务数据汇总与分析之流程建立与数据读取、处理、汇总、分析

一、案例介绍&#xff1a; A公司共有13个开在不同银行的帐户&#xff0c;分别用于不同的业务分部或地区分部收付款。公司总部为了核算每月的收支情况&#xff0c;查看银行在哪个月交易量频繁&#xff0c;需要每月汇总各个银行的帐户借方和贷方金额&#xff0c;并将其净收支&am…...

编程日记 2024/2/13 20:53:07

华为机试真题实战应用【赛题代码篇】-输入整型数组和排序标识/根据排序标识flag给数组排序(附Java、C++和python代码)

目录 问题描述 输出描述： 示例： 代码实现 Java 代码2 代码3 python...

编程日记 2024/2/13 20:47:01

【算法随想录01】环形链表

题目&#xff1a;141. 环形链表 难度&#xff1a;EASY 代码 哈希表遍历求解&#xff0c;表中存储的是元素地址。 时间复杂度 O ( N ) O(N) O(N)&#xff0c;空间复杂度 O ( N ) O(N) O(N) /*** Definition for singly-linked list.* struct ListNode {* int val;* …...

编程日记 2024/2/13 20:46:01

macOS Sonoma 14.3.1（23D60）发布

系统介绍 黑果魏叔2 月 9 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.3.1 更新&#xff08;内部版本号&#xff1a;23D60&#xff09;&#xff0c;本次更新距离上次发布隔了 17 天。 魏叔 查询苹果官方更新日志&#xff0c;macOS Sonoma 14.3.1 修复内容和 …...

编程日记 2024/2/13 20:42:56

2024-02-11 叮当鸭-平台系统-第三次重构-目标确定

摘要: 对平台系统的第三个版本&#xff0c;做总体规划&#xff0c;明确要达到的目标&#xff0c;功能需求&#xff0c;性能需求。 根据这些所要达到的目标&#xff0c;确定选择何种的方案。方案的成本评估单独进行&#xff0c;本文重点分析要达到的各种目标。 功能需求: 能和…...

编程日记 2024/2/13 20:39:53

Android7.0-Fiddler证书问题

一、将Fiddler的证书导出到电脑&#xff0c;点击Tools -> Options -> HTTPS -> Actions -> Export Root Certificate to Desktop 二、下载Window版openssl&#xff0c; 点击这里打开页面&#xff0c;下拉到下面&#xff0c;选择最上面的64位EXE点击下载安装即可 安…...

编程日记 2024/2/13 20:38:52

Kotlin：单例模式(项目使用实例)

摘要 单例模式主要的五种如下&#xff1a; 饿汉式懒汉式线程安全的懒汉式双重校验锁式&#xff08;Double Check)静态内部类式 一、项目使用单例模式实例场景 app在运行时缓存部分数据&#xff0c;作为全局缓存数据&#xff0c;以便其他页面及时更新页面对应状态的数据&…...

编程日记 2024/2/13 20:26:10

vue百度地图的和element输入框/v-region的联动

vue百度地图的使用 第一步&#xff1a;安装插件第二步&#xff1a;main.js中引用第三步&#xff1a;页面中使用 第一步&#xff1a;安装插件 npm install vue-baidu-map --save第二步&#xff1a;main.js中引用 // 百度地图 import BaiduMap from vue-baidu-map Vue.use(Baid…...

编程日记 2024/2/13 20:22:06

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/8 15:03:04

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/2/9 3:58:32

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2026/2/5 1:50:16

【Vue】scoped+组件通信+props校验

【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性&#xff0c; 令样式只作用于当前组件的标签 作用&#xff1a;防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...

编程新知 2026/2/9 8:52:21