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

CSS之flex布局

news 2026/2/10 4:41:54

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

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

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

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

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

Centos7安装nginx yum报错

Centos7安装nginx yum报错，yum源报错解决办法： 1、更新epel源后，出现yum报错 [roothacker117 ~]# yum install epel-release（安装成功） [roothacker117 ~]# yum install nginx（安装失败，提示如…...

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

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

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

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

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

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

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

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

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

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

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

报错信息 msg: “服务端异常，请联系管理员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进行日志打印时分别包如下错误： 源码： //fastjon log.info("\nRequest Info :{} \n"， JSON.toJSONString(requestInfo)); //jackson …...

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

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

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

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

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

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

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

MySQL篇----第二十篇

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

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

Promise 基础

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

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

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

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

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

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

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

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

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

题目：141. 环形链表难度：EASY 代码哈希表遍历求解，表中存储的是元素地址。时间复杂度 O ( N ) O(N) O(N)，空间复杂度 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 日消息，苹果今日向 Mac 电脑用户推送了 macOS 14.3.1 更新（内部版本号：23D60），本次更新距离上次发布隔了 17 天。魏叔查询苹果官方更新日志，macOS Sonoma 14.3.1 修复内容和 …...

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

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

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

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

Android7.0-Fiddler证书问题

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

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

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

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

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

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

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

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

React第五十七节 Router中RouterProvider使用详解及注意事项

前言在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...

编程新知 2026/2/9 6:48:42

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

基础测试工具使用经验

背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...

编程新知 2025/11/22 7:38:58

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

C++使用 new 来创建动态数组

问题： 不能使用变量定义数组大小原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

基于 TAPD 进行项目管理

起因自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。操作流程注册 TAPD，需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

排序算法总结（C++）

目录一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序三、总结一、稳定性排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。稳定性对基础类型对象…...

编程新知 2026/1/25 9:33:23