适用场景

一维（行或列）布局

基本概念

  • 包裹所有被布局元素的父元素为容器

    在这里插入图片描述

  • 所有被布局的元素为项目

    在这里插入图片描述

  • 项目的排列方向（垂直/水平）为主轴

  • 与主轴垂直的方向交交叉轴

在这里插入图片描述

容器上启用 flex 布局

将容器的 display 样式设置为 flex 或 inline-flex

排列方向 flex-direction

  • row（默认值）：从左到右水平排列，此时主轴为水平方向在这里插入图片描述

  • row-reverse：从右到左水平排列，此时主轴为水平方向

    在这里插入图片描述

  • column：从上到下垂直排列，此时主轴为垂直方向
    在这里插入图片描述

  • column-reverse：从下到上垂直排列，此时主轴为垂直方向
    在这里插入图片描述

换行 flex-wrap

  • nowrap（默认值）：不换行，项目可能被压缩或溢出容器。

    在这里插入图片描述

  • wrap：换行，第二行在第一行下方（水平排列时）
    在这里插入图片描述

  • wrap-reverse：换行，第二行在第一行上方（水平排列时）。
    在这里插入图片描述

主轴上的对齐方式 justify-content

  • flex-start（默认值）：项目靠主轴起点对齐。
  • flex-end：项目靠主轴终点对齐
  • center：项目在主轴上居中对齐
  • space-between：项目两端对齐，间隔均匀分布
  • space-around：项目周围间隔均匀分布（两端间隔为中间的一半）
  • space-evenly：项目之间及两端间隔完全相等

在这里插入图片描述

交叉轴的对齐方式 align-items

交叉轴即与主轴垂直的方向

  • stretch（默认值）：项目拉伸以填满交叉轴。
  • flex-start：项目靠交叉轴起点对齐。
  • flex-end：项目靠交叉轴终点对齐。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目基于文本基线对齐。
    在这里插入图片描述

多行的对齐方式 align-content

仅在 flex-wrap: wrap 生效

  • flex-start：多行靠交叉轴起点对齐。
  • flex-end：多行靠交叉轴终点对齐。
  • center：多行在交叉轴上居中对齐。
  • stretch：多行拉伸以填满交叉轴剩余空间。
  • space-between：多行两端对齐，间隔均匀分布。
  • space-around：多行周围间隔均匀分布。
  • space-evenly：多行之间及两端间隔完全相等。
.container {display: flex;flex-wrap: wrap;align-content: space-around;
}

在这里插入图片描述

项目上添加 flex 特性

放大 flex-grow

  • 定义项目在容器有剩余空间时的放大比例，默认值为 0（不放大）。
  • 给容器添加 min-width: 0 或 overflow: auto;可防止内容撑开容器。
.item {flex-grow: 1; /* 项目将按比例分配剩余空间 */
}

在这里插入图片描述

缩小 flex-shrink

定义项目在容器空间不足时的缩小比例，默认值为 1（按比例缩小）。

.item {flex-shrink: 0; /* 项目不缩小，可能导致溢出 */
}

在这里插入图片描述
在这里插入图片描述

初始大小 flex-basis

定义项目在分配剩余空间之前的初始大小，可以是长度值（如 200px）或百分比（如 50%），默认值为 auto（根据内容大小自动调整）。

.item {flex-basis: 100px; /* 项目初始宽度为 100px */
}

调整项目交叉轴的对齐方式 align-self

优先级高于容器的 align-items

.item {align-self: flex-end; /* 该项目在交叉轴上靠终点对齐 */
}

在这里插入图片描述

排序 order

项目的排列顺序。数值越小，排列越靠前，默认为0

在这里插入图片描述

简写

flex

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，常用写法：

  • flex: 1：等同于 flex: 1 1 0%，表示项目放大、缩小且初始大小为内容大小。
  • flex: 0 1 auto：表示项目不放大、按比例缩小且初始大小为内容大小。
.item {flex: 1;
}
  • flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景
    https://blog.csdn.net/weixin_41192489/article/details/120846362

flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

深度详解

剩余空间分配规则

flex-grow，flex-shrink和flex-basis
https://blog.csdn.net/weixin_41192489/article/details/120842902

实战范例

绘制骰子

https://blog.csdn.net/weixin_41192489/article/details/136398234

水平居中导航栏

<nav class="flex justify-center space-x-4"><a href="#">首页</a><a href="#">产品</a><a href="#">关于我们</a>
</nav>

nav {display: flex;justify-content: center;gap: 16px;
}

垂直居中卡片

<div class="flex items-center justify-center h-screen bg-gray-200"><div class="bg-white p-8 rounded shadow-md"><h2 class="text-2xl font-bold mb-4">欢迎使用</h2><p>这是一个垂直居中的卡片。</p></div>
</div>

body {margin: 0;
}

响应式列布局

<div class="flex flex-wrap"><div class="w-full md:w-1/2 lg:w-1/3 p-4">内容1</div><div class="w-full md:w-1/2 lg:w-1/3 p-4">内容2</div><div class="w-full md:w-1/2 lg:w-1/3 p-4">内容3</div>
</div>

@media (min-width: 768px) {.w-1/2 {flex: 0 0 50%;max-width: 50%;}
}
@media (min-width: 1024px) {.w-1/3 {flex: 0 0 33.33%;max-width: 33.33%;}
}

实战技巧

  • 使用margin:auto智能分配剩余空间
    https://blog.csdn.net/weixin_41192489/article/details/120834852
  • flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践
    https://blog.csdn.net/weixin_41192489/article/details/139058300

注意事项

  • Flex 与 float、clear 冲突：Flex 项目自动脱离文档流，float 和 clear 属性对其无效。

  • 浏览器兼容性：主流浏览器（Chrome、Firefox、Safari、Edge）均支持 Flex 布局，但需注意对旧版浏览器（如 IE10 及以下）添加前缀（-webkit-, -ms-）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/82436.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/82436.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/82436.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于MATLAB实现传统谱减法以及两种改进的谱减法（增益函数谱减法、多带谱减法）的语音增强

基于MATLAB实现传统谱减法以及两种改进的谱减法（增益函数谱减法、多带谱减法）的语音增强

基于MATLAB实现传统谱减法以及两种改进的谱减法&#xff08;增益函数谱减法、多带谱减法&#xff09;的语音增强代码示例&#xff1a; 传统谱减法 function enhanced traditional_spectral_subtraction(noisy, fs, wlen, inc, NIS, a, b)% 参数说明&#xff1a;% noisy - 带…
阅读更多...
symbol【ES6】

symbol【ES6】

你一闭眼世界就黑了&#xff0c;你不是主角是什么&#xff1f; 目录 什么是Symbol&#xff1f;‌Symbol特点‌&#xff1a;创建方法&#xff1a;注意点&#xff1a;不能进行运算&#xff1a;显示调用toString() --没有意义隐式转换boolean 如果属性名冲突了怎么办&#xff1f;o…
阅读更多...
LeetCode 649. Dota2 参议院 java题解

LeetCode 649. Dota2 参议院 java题解

https://leetcode.cn/problems/dota2-senate/description/ 贪心。不会写。 class Solution {public String predictPartyVictory(String senate) {boolean rtrue,dtrue;int flag0;//flag>0,d前面有r;flag<0,r前面有dchar[] senatessenate.toCharArray();//每一轮while(r…
阅读更多...
机器学习第二十二讲：感知机 → 模仿大脑神经元的开关系统

机器学习第二十二讲：感知机 → 模仿大脑神经元的开关系统

机器学习第二十二讲&#xff1a;感知机 → 模仿大脑神经元的开关系统 资料取自《零基础学机器学习》。 查看总目录&#xff1a;学习大纲 关于DeepSeek本地部署指南可以看下我之前写的文章&#xff1a;DeepSeek R1本地与线上满血版部署&#xff1a;超详细手把手指南 感知机详解…
阅读更多...
maven快速上手

maven快速上手

之前我们项目如果要用到其他额外的jar包&#xff0c;需要自己去官网下载并且导入。但是有maven后&#xff0c;直接在maven的pom.xml文件里用代码配置即可&#xff0c;配置好后maven会自动帮我们联网下载并且会自动导入该jar包 在右边的maven中&#xff0c;我们可以看到下载安装…
阅读更多...
科学养生指南：解锁健康生活密码

科学养生指南：解锁健康生活密码

健康是人生最宝贵的财富&#xff0c;在快节奏的现代生活中&#xff0c;科学养生成为保持良好状态的关键。遵循现代医学与营养学的研究成果&#xff0c;无需依赖传统中医理论&#xff0c;我们也能找到适合自己的养生之道。​ 均衡饮食是健康的基石。现代营养学强调 “食物多样&…
阅读更多...
Qt状态机QStateMachine

Qt状态机QStateMachine

QStateMachine QState 提供了一种强大且灵活的方式来表示状态机中的状态&#xff0c;通过与状态机类(QStateMachine)和转换类(QSignalTransition&#xff0c; QEventTransition)结合&#xff0c;可以实现复杂的状态逻辑和用户交互。合理使用嵌套状态机、信号转换、动作与动画、…
阅读更多...
C++八股 —— 原子操作

C++八股 —— 原子操作

文章目录 1. 什么是原子操作2. 原子操作的特点3. 原子操作的底层原理4. 内存序内存屏障 5. 原子操作和互斥锁的对比6. 常用的原子操作7. 相关问题讨论 参考&#xff1a; C atomic 原子操作_c 原子操作-CSDN博客DeepSeek 1. 什么是原子操作 原子操作&#xff08;Atomic Opera…
阅读更多...
双紫擒龙紫紫红指标源码学习，2025升级版紫紫红指标公式-重点技术

双紫擒龙紫紫红指标源码学习，2025升级版紫紫红指标公式-重点技术

VAR1:MA((LOWHIGHCLOSE)/3,5); VAR2:CLOSEHHV(C,4) AND REF(C,1)LLV(C,4); 双紫擒龙:REF(C,1)LLV(C,4) AND C>REF(C,2) OR REF(C,2)LLV(C,4) AND REF(C,1)<REF(C,3) AND REF(C,2)<REF(C,4) AND C>REF(C,1); VAR4:VAR1>REF(VAR1,1) AND REF(VAR1,1)<REF(VAR1,…
阅读更多...
NeuralRecon技术详解：从单目视频中实现三维重建

NeuralRecon技术详解：从单目视频中实现三维重建

引言 三维重建是计算机视觉领域中的一项关键技术&#xff0c;它能够从二维图像中恢复出三维形状和结构。随着深度学习的发展&#xff0c;基于学习的方法已经成为三维重建的主流。NeuralRecon是一种先进的三维重建方法&#xff0c;它能够从单目视频中实时生成高质量的三维模型。…
阅读更多...
Ubuntu 上开启 SSH 服务、禁用密码登录并仅允许密钥认证

Ubuntu 上开启 SSH 服务、禁用密码登录并仅允许密钥认证

1. 安装 OpenSSH 服务 如果尚未安装 SSH 服务&#xff0c;运行以下命令&#xff1a; sudo apt update sudo apt install openssh-server2. 启动 SSH 服务并设置开机自启 sudo systemctl start ssh sudo systemctl enable ssh3. 生成 SSH 密钥对&#xff08;本地机器&#xf…
阅读更多...
MySQL 索引的增删改查

MySQL 索引的增删改查

MySQL 索引的增删改查 1 建表时创建索引 [UNIQUE|FULLTEXT|SPATIAL] INDEX|KEY [别名] (字段名 [(长度)] [ASC|DESC] )主键直接写&#xff1a; PRIMARY KEY (Id)例如&#xff1a; CREATE TABLE people (id int NOT NULL PRIMARY KEY AUTO_INCREMENT,last_name varchar(10)…
阅读更多...
为什么现代CSS应该选择OKLCH：从颜色科学到设计系统革新

为什么现代CSS应该选择OKLCH：从颜色科学到设计系统革新

在数字界面中&#xff0c;颜色不仅是美学的载体&#xff0c;更是信息传递的重要工具。CSS Color Level 4 标准引入了 OKLCH 颜色空间, 提供​​感知均匀性​​&#xff08;颜色差异与实际视觉感受一致&#xff09;&#xff0c;解决传统HSL/HSV在调整颜色时的不自然问题。文本帮…
阅读更多...
【java】小练习--零钱通

【java】小练习--零钱通

文章目录 前言一、项目开发流程说明二、功能实现2.1 菜单2.2 零钱通明细2.3 零钱通收益2.4 零钱通消费2.5 零钱通退出确认2.6 零钱通金额校验2.7 完整代码 三、零钱通OOP版 前言 本文是我跟着B站韩顺平老师的 Java 教程学习时动手实现“零钱通”项目的学习笔记&#xff0c;主要…
阅读更多...
人工智能数学基础实验（四）：最大似然估计的-AI 模型训练与参数优化

人工智能数学基础实验（四）：最大似然估计的-AI 模型训练与参数优化

一、实验目的 理解最大似然估计&#xff08;MLE&#xff09;原理&#xff1a;掌握通过最大化数据出现概率估计模型参数的核心思想。实现 MLE 与 AI 模型结合&#xff1a;使用 MLE 手动估计朴素贝叶斯模型参数&#xff0c;并与 Scikit-learn 内置模型对比&#xff0c;深入理解参…
阅读更多...
我的第1个爬虫程序——豆瓣Top250爬虫的详细步骤指南

我的第1个爬虫程序——豆瓣Top250爬虫的详细步骤指南

我的第1个爬虫程序——豆瓣Top250爬虫的详细步骤指南 一、创建隔离开发环境 1. 使用虚拟环境&#xff08;推荐venv&#xff09; # 在项目目录打开终端执行 python -m venv douban_env # 创建虚拟环境 source douban_env/bin/activate # Linux/macOS激活 douban_env\Scri…
阅读更多...
STM32八股【11】-----Linux Bootloader （U-Boot）

STM32八股【11】-----Linux Bootloader （U-Boot）

参考U-Boot U-Boot是什么 嵌入式Linux系统需要一个bootloader来加载系统 U-boot就是一个通用开源的嵌入式Linux bootloader 主要实现的功能&#xff1a; 初始化硬件资源&#xff08;如内存、串口、存储器等&#xff09;从存储介质加载Linux内核到内存中传递启动参数给内核启…
阅读更多...
【设计模式】责任链+模板+工程模式使用模板

【设计模式】责任链+模板+工程模式使用模板

前言 方便写出优雅&#xff0c;解耦&#xff0c;高内聚&#xff0c;高复用的代码。 Demo // 1. 定义验证器接口&#xff08;责任链模式&#xff09; public interface Validator {Validator setNext(Validator next);boolean validate(Data data); }// 2. 创建抽象验证器&am…
阅读更多...
Unity3D仿星露谷物语开发49之创建云杉树

Unity3D仿星露谷物语开发49之创建云杉树

1、目标 创建一颗既可以生长又可以砍伐的云杉树&#xff0c;这个和之前创建橡树类似。 2、创建云杉树预制体 创建新物体命名为CropTreeBlueSpruce&#xff0c;并且添加Box Collider 2D和Crop组件。 在CropTreeBlueSpruce下创建子物体命名为CropSprite&#xff0c;添加3个组件…
阅读更多...
【C#】消息队列的使用

【C#】消息队列的使用

在C#中使用消息队列&#xff0c;通常是指使用微软的Message Queuing (MSMQ)技术。MSMQ提供了一种异步通信协议&#xff0c;允许应用程序通过暂时存储要发送到目的地的消息来相互通信。 安装MSMQ 首先&#xff0c;确保你的开发机器和部署服务器上都安装了MSMQ。可以通过“控制…
阅读更多...
最新文章

Copyright @ 2022~2023