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

CSS-布局-flex

CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox ),是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。

基本概念

  • 容器:使用 display:flexdisplay:inline-flex 声明的元素,称为 Flex 容器(flex container),简称 容器
  • 项目容器 中所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称 项目
  • 主轴:项目沿其一次排列的轴被称为 主轴
  • 侧轴:垂直于主轴的轴被称为 侧轴

容器的属性

  • flex-direction
    • 定义了 主轴 的方向
      • row:主轴为水平方向,起点在左端(默认
      • row-reverse:主轴为水平方向,起点在右端
      • column:主轴为垂直方向,起点在上沿
      • column-reverse:主轴为垂直方向,起点在下沿
  • flex-wrap
    • 默认情况,所有项目会在一行显示,如需换行,使用 flex-wrap
      • nowrap:不换行(默认
      • wrap:换行,第一行在上方
      • wrap-reverse:换行,第一行在下方
  • flex-flow
    • 该属性是 flex-directionflex-wrap 的简写,默认值row nowrap,水平排列,不换行。
  • justify-content
    • 定义了项目沿着 主轴线 的对齐方式
      • flex-start: 项目左对齐(默认
      • flex-end: 项目右对齐
      • center: 项目居中对齐
      • space-between: 项目两端对齐,容器首尾不留距离,项目之间的间隔都相等
      • space-around: 项目两端对齐,容器首尾留有距离
  • align-items适用于不换行的情况
    • 定义了项目所在 侧轴线 的对齐方式
      • flex-start: 侧轴 起点对齐,如果 flex-direction:row,则项目顶部对齐
      • flex-end: 侧轴 终点对齐,如果 flex-direction:row,则项目尾部对齐
      • center: 项目居中对齐
      • baseline: 项目的 第一行文字的基线 对齐
      • stretch: 如果项目 未设置高度 或者 设为auto,拉伸与容器同高(默认
  • align-content多行情况时适用
    • 定义了项目所在侧轴线的对齐方式
      • flex-start: 侧轴 起点对齐
      • flex-end: 侧轴 终点对齐
      • center: 侧轴 居中对齐
      • space-between: 两端对齐,容器首尾不留距离
      • space-around: 两端对齐,容器首尾留有距离
      • stretch: 如果项目 未设置高度 或者 设为auto,拉伸与容器同高(默认

项目属性

  • order:项目的排列顺序
    • 数值越小,排列越靠前,可以为负值
      • order:0,保持项目原来的位置(默认
  • flex-grow(扩大):定义项目的放大比例
    • 默认为0:如果容器存在剩余空间,保持原大小,不放大
    • 项目 flex-grow 属性都为 1:项目平均分配剩余空间
    • 某个项目 flex-grow 属性为 2,其他项目都为 1,那么为 2 的项目宽度为 1 的 2 倍
  • flex-shrink(缩小):定义项目的缩小比例
    • 默认为1:如果容器空间不足,项目缩小
    • 项目 flex-shrink 属性都为 1,当容器空间不足时,所有项目等比缩小
    • 某个项目 flex-shrink 属性为 0,其他项目都为 1,当容器空间不足时,为 0 的项目不缩小
  • flex-basis:分配多余空间之前,项目占据主轴空间的大小,相当于为项目设置宽度
    • 默认值:auto,保持项目的本来大小,不作任何宽度改变
    • 可以定义项目的宽度(如200px)
    • 也可以设置 flex-basis:10%,将占据空间的10%
  • flex(常用)flex-grow flex-shrink flex-basis 的缩写
    • 默认值:0 1 auto,不放大,但缩小;
    • auto(1 1 auto):等分放大缩小
    • none(0 0 auto):不放大,不缩小
    • flex:1 相当于只设置了 flex-grow
  • align-self:定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。
    • 允许单个项目与其他项目不一样的对齐方式,可覆盖 align-items 属性。
    • 默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch
    • flex-start | flex-end | center | baseline | stretch 与 align-items 属性完全一致

📖 flex布局小案例

相关文章:

CSS-布局-flex

CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox ),是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。 基本概念 容器:使用 display:flex 或 display:inline-flex 声明的…...

「C系列」C 数组

文章目录 一、C 数组1. 声明数组2. 初始化数组3. 访问数组元素4. 数组越界5. 多维数组 二、C 操作数组的方法有哪些三、C 数组-应用场景1. 存储固定数量的数据2. 实现算法(如排序)3. 处理数据集合 四、相关链接 一、C 数组 在C语言中,数组是…...

Python框架scrapy有什么天赋异禀

Scrapy框架与一般的爬虫代码之间有几个显著的区别,这些差异主要体现在设计模式、代码结构、执行效率以及可扩展性等方面。下面是一些关键的不同点: 结构化与模块化: Scrapy:提供了高度结构化的框架,包括定义好的Spider…...

【ROS2大白话】四、ROS2非常简单的传参方式

系列文章目录 【ROS2大白话】一、ROS2 humble及cartorgrapher安装 【ROS2大白话】二、turtlebot3安装 【ROS2大白话】三、给turtlebot3安装realsense深度相机 【ROS2大白话】四、ROS2非常简单的传参方式 文章目录 系列文章目录前言一、launch文件传参的demo1. 编写launch.py文…...

浅谈mysql 的批量delete 和 使用in条件批量删除问题

在考虑这两个DELETE语句的性能时,我们需要考虑数据库如何执行这些查询以及它们背后可能涉及的索引和数据结构。 1.执行多个单独的DELETE语句: DELETE FROM a WHERE b 1 AND c 1; ... DELETE FROM a WHERE b 1000 AND c 1000; 这种方法的优点是每…...

【Spring Boot】过滤敏感词的两种实现

文章目录 项目场景前置知识前缀树 实现方式解决方案一:读取敏感词文件生成前缀树构建敏感词过滤器1. 导入敏感词文件 src/main/resources/sensitive_words.txt2. 构建敏感词过滤器 SensitiveFilter3. 测试与使用 解决方案二:使用第三方插件 houbb/sensit…...

在 Zustand 中管理状态能使用类(Class)吗

在 Zustand 中,通常不推荐使用类(Class)来管理状态,因为 Zustand 的设计理念是基于函数式编程和 React Hooks 的。然而,仍然可以在 Zustand 中间接地使用类,但这并不是 Zustand 的典型用法。 如果确实想要…...

MoreTable 方法selectWithFun,count 使用实例

ORM Bee, example for MoreTable methods:selectWithFun,count ORM Bee时, MoreTable 方法selectWithFun,count 使用实例 package org.teasoft.exam.bee.osql;import org.teasoft.bee.osql.BeeException; import org.teasoft.bee.osql.FunctionType; import org.teasoft.be…...

【SpringBoot】在Spring中使用自定义条件类在Java声明Bean时实现条件注入

在Spring框架中,通过实现org.springframework.context.annotation.Condition接口并重写matches()方法,可以根据自定义条件来控制Bean的注入。这种机制非常灵活,可以帮助开发人员根据环境或配置来有选择地启用或禁用某些Bean。本文将详细介绍如…...

网卡聚合链路配置

创建名为mybond0的绑定,使用示例如下: # nmcli con add type bond con-name mybond0 ifname mybond0 mode active-backup添加从属接口,使用示例如下: # nmcli con add type bond-slave ifname enp3s0 master mybond0要添加其他从…...

PlantSimulation导入cad图作为背景

PlantSimulation导入cad图作为背景 首先要整理cad文件,正常的工艺规划总图中存在较多杂乱文件,这些信息是不需要的,如果直接导入,会非常卡。 1、打开cad软件,使用layon命令打开所有的隐藏图层,删除不需要…...

【大模型】个人对大模型选择的见解

选择大模型产品时,需要考虑多个因素,包括但不限于以下几点: 需求匹配度:首先,要明确你的需求是什么。不同的大模型产品可能在功能、性能、应用场景等方面有所侧重。例如,有的模型擅长自然语言处理&#xff…...

java的反射和python的鸭子类型

Java的反射(Reflection)和Python的鸭子类型(Duck Typing)感觉相似但又说不出具体的细节,本文借助kimi试图给出总结。 相似之处: 动态性:Java的反射允许程序在运行时查询、创建和修改类和对象的…...

爬虫工具yt-dlp

yt-dlp是youtube-dlp的一个fork,youtube-dlp曾经也较为活跃,但后来被众多网站屏蔽,于是大家转而在其基础上开发yt-dlp。yt-dlp的github项目地址为:GitHub - yt-dlp/yt-dlp: A feature-rich command-line audio/video downloaderA …...

【代码随想录训练营】【Day 50】【动态规划-9】| Leetcode 198, 213, 337

【代码随想录训练营】【Day 50】【动态规划-9】【需二刷】| Leetcode 198, 213, 337 需强化知识点 需二刷,打家劫舍系列 题目 198. 打家劫舍 class Solution:def rob(self, nums: List[int]) -> int:if len(nums) 1:return nums[0]dp [0] * (len(nums))dp…...

源码讲解kafka 如何使用零拷贝技术(zero-copy)

前言 kafka 作为一个高吞吐量的分布式消息系统,广泛应用与实时应用场景中。为了实现高效的数据传输,kafka使用了零拷贝技术(zero-copy)显著提高了性能。本文将详细讲解 Kafka 如何利用零拷贝技术优化数据传输。 什么是零拷贝 零拷贝技术目的是减少数据传输的效率。在传统…...

Ubuntu20.04配置qwen0.5B记录

环境简介 Ubuntu20.04、 NVIDIA-SMI 545.29.06、 Cuda 11.4、 python3.10、 pytorch1.11.0 开始搭建 python环境设置 创建虚拟环境 conda create --name qewn python3.10预安装modelscope和transformers pip install modelscope pip install transformers安装pytorch co…...

java自学阶段二:JavaWeb开发--day80(项目实战2之苍穹外卖)

《项目案例—黑马苍穹外卖》 目录: 学习目标项目介绍前端环境搭建(前期直接导入老师的项目,后期自己敲)后端环境搭建(导入初始项目,新建仓库使用git管理项目,新建数据库,修改登录功能&#xff…...

HPUX系统Oracle RAC如何添加ASM磁盘

前言 HPUX简介 HP-UX (Hewlett-Packard Unix) 是惠普公司开发的类 Unix 操作系统。自 1980 年代问世以来,HP-UX 在技术和功能上不断发展,适应了多种硬件平台和企业计算需求。以下是 HP-UX 的发展历史概述: 1980 年代:起源与早期…...

Jmeter 压力测测试的简单入门

下载安装 官方网站:Apache JMeter - Download Apache JMeter 下载完成解压即可。 配置 1. 找到 bin 目录下的 ApacheJMeter.jar 包,直接打开 如果向图片这样不能直接打开,就在此路径运行 CMD,然后输入下面的命令即可启动。 ja…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...

线程同步:确保多线程程序的安全与高效!

全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...