web前端-------弹性盒子(2)
上一讲我们谈的是盒子的容器实行,今天我们来聊一聊弹性盒子的项目属性;
*******************(1)顺序属性
order属性,用于定义容器中项目的出现顺序。
顺序属性值,为整数,可以为负数,数字大小决定项目出现的先后顺序。
数字越小,排列越靠前,默认值为0。

****************************(2)长度属性
flex属性,是广义上的长度属性。它包含了项目的放大属性、缩小属性和初始长度属性。
!!!!!!flex-grow属性,用于定义容器中项目的相对放大比例。注意!在容器还有剩余空间时,项目才能体现出放大的效果。flex-grow的属性值默认为0,没有放大效果,会展示默认长度。

与之相反,容器空间不足时,我们就需要使用缩小属性,来对项目进行收缩。
通过缩小属性flex-shrink,定义了容器中项目的相对缩小比例。
flex-shrink的属性值默认为1,空间不足时,项目将缩小。
设置flex-shrink: 0;时,即使容器空间不足,也可以保证项目不被压缩。

flex-basis属性,用于定义容器中项目的初始长度。
当项目左右排列时,项目长度和宽度类似;
当项目上下排列时,项目长度和高度类似。

当项目左右排列时,若元素同时设置了flex-basis属性和width属性,flex-basis的优先级更高。
前面,我们依次学习了flex-grow、flex-shrink和flex-basis属性。
实际上,我们经常使用它们的简写形式 flex。
简写形式 flex的属性值依次为: flex-grow、flex-shrink、flex-basis。

在弹性布局时,我们经常会使用自适应布局。自适应布局会充分分配容器的尺寸,分为两种:
内敛的flex: 1;、霸道的flex: auto;。
flex: 1;等同于设置flex: 1 1 0%;。flex: 1;的尺寸表现更为内敛,当项目未设置宽度时,其会优先牺牲自己的尺寸。简单来说,一般在等分布局时使用。
flex: auto;等同于设置flex: 1 1 auto;。flex: auto;的尺寸表现更为霸道,当项目未设置宽度时,其会优先扩展自己的尺寸;简单来说,一般适合内容动态适配的布局。
******************************(3)单项目对齐属性。
单项目对齐属性align-self,和垂直对齐属性类似,用于设置项目在垂直方向的对齐方式。
不同的是,align-self,是为某个项目设置不同于其它项目的对齐方式。
单项目对齐属性align-self会覆盖垂直对齐属性align-items的值。
相关文章:
web前端-------弹性盒子(2)
上一讲我们谈的是盒子的容器实行,今天我们来聊一聊弹性盒子的项目属性; *******************(1)顺序属性 order属性,用于定义容器中项目的出现顺序。 顺序属性值,为整数,可以为负数ÿ…...
图论练习4
内容:染色划分,带权并查集,扩展并查集 Arpa’s overnight party and Mehrdad’s silent entering 题目链接 题目大意 个点围成一圈,分为对,对内两点不同染色同时,相邻3个点之间必须有两个点不同染色问构…...
flutter go_router 官方路由(一)基本使用
1 项目中添加最新的依赖 go_router: ^13.1.0如下图所示,我当前使用的flutter版本为3.16.0 然后修改应用的入口函数如下: import package:flutter/material.dart; import package:go_router/go_router.dart;void main() {runApp(const MyApp()); }cla…...
QT中,对于大小端UDP网络发送的demo,帧头帧尾
简单demo: 发送端: #include <QUdpSocket> #include <QtEndian>#pragma pack(1) struct Test {unsigned char t1:1;unsigned char t2:2;unsigned char t3:3;unsigned char t4:2;quint8 a 1;quint16 b 2;quint16 c 3;//double b …...
ip网络的三类地址及其相互关系
随着互联网的普及和发展,IP网络已成为全球范围内最重要的信息交换平台。在IP网络中,IP地址是每个设备在网络中的唯一标识,是实现网络通信的关键。虎观代理小二二将详细介绍IP网络中的三类地址,即A类、B类和C类地址,以及…...
开源计算机视觉库OpenCV详细介绍
开源计算机视觉库OpenCV详细介绍 1. OpenCV简介 OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉和机器学习软件库。它最初由Intel开发,现在由一个庞大的社区维护和更新。OpenCV旨在提供一个通用、跨平台的计算机…...
go消息队列RabbitMQ - 订阅模式-direct
1.发布订阅 在Fanout模式中,一条消息,会被所有订阅的队列都消费。但是,在某些场景下,我们希望不同的消息被不同的队列消费。这时就要用到Direct类型的Exchange。 在Direct模型下: 队列与交换机的绑定,不能…...
PyTorch 2.2 中文官方教程(十八)
开始使用完全分片数据并行(FSDP) 原文:pytorch.org/tutorials/intermediate/FSDP_tutorial.html 译者:飞龙 协议:CC BY-NC-SA 4.0 作者:Hamid Shojanazeri,Yanli Zhao,Shen Li 注意…...
jenkins部署vue项目
首次加载比较慢、需要等待很长时间 到这个页面算是初始化完成了 输入密码路径为 之前设置的路径 可以在文件中找或者 docker logs jenkins 直接安装推荐插件 正在安装中!! 安装成功后创建管理员账号(一定要记住这个也是登录账号密码) 这里实例配置直接…...
十一、C++核心编程(2)引用
一、引用的基本使用 作用: 给变量起别名语法: 数据类型 &别名 原名 #include<iostream> #include<string.h> using namespace std;int main() {//引用基本语法//数据类型 &别名 原名int a 10;//创建引用int &b a;cout << "a "…...
numpy学习总结二
单词发音: squeeze 发音:死贵子 concatenation [kɒnˌktəˈneɪʃən] 拼接;串联 threshold [θreʃhəʊld] 死re后的 quantile 拷n太哦 分位数 因果不能改 智慧不能赐 正法不可说 无缘不能度 天雨虽宽不润无根之草;佛法虽广不度无缘之人 …...
3 编辑器(Vim)
1.完成 vimtutor。备注:它在一个 80x24(80 列,24 行) 终端窗口看起来效果最好。 2.下载我们提供的 vimrc,然后把它保存到 ~/.vimrc。 通读这个注释详细的文件 (用 Vim!), 然后观察 …...
C/C++ (stdio.h)标准库详解
cstdio,在C语言中称为stdio.h。该库使用所谓的流与物理设备(如键盘、打印机、终端)或系统支持的任何其他类型的文件一起操作。 在本文将会通过介绍函数参数,举出实际的简单例子来帮助大家快速上手使用函数。 目录 一、流 二、库函数 1、F…...
深度学习介绍
对于具备完善业务逻辑的任务,大多数情况下,正常的人都可以给出一个符合业务逻辑的应用程序。但是对于一些包含超过人类所能考虑到的逻辑的任务,例如面对如下任务: 编写一个应用程序,接受地理信息、卫星图像和一些历史…...
ywtool dhcp命令
一.dhcp功能介绍 就是通过脚本实现dhcp地址池的增、删、改、查这几个功能日志文件路径: /var/log/ywtools/ywtool-dhcp.log/usr/local/ywtools/config/config.ini中account参数(ywtool dhcp这个命令用的,但是这个命令只能配置1个地址池,所以这里面的参数没什么意义) 二.配置…...
ChatGPT高效提问—基础知识(LM、PLM以及LLM)
ChatGPT高效提问—基础知识(LM、PLM以及LLM) 了解语言模型(language model, LM)、预训练语言模型(pre-trained language model, PLM)和大型语言模型(large language model, LLM)…...
MongoDB复制集实战及原理分析
文章目录 MongoDB复制集复制集架构三节点复制集模式PSS模式(官方推荐模式)PSA模式 典型三节点复制集环境搭建复制集注意事项环境准备配置复制集复制集状态查询使用mtools创建复制集安全认证复制集连接方式 复制集成员角色属性一:Priority 0属…...
Java并发之synchronized详解
☆* o(≧▽≦)o *☆嗨~我是小奥🍹 📄📄📄个人博客:小奥的博客 📄📄📄CSDN:个人CSDN 📙📙📙Github:传送门 📅&a…...
Flask 项目自动生成 API 文档的高效实践
Flasgger,作为一款强大的 Flask 扩展,自动从 Flask 应用中提取并生成 OpenAPI 规范文档,配备 SwaggerUI,为开发者提供了一条快捷通道,让 API 的文档编制和交互式测试变得简单易行。Flasgger 的设计原则是简化开发流程&…...
WebChat——一个开源的聊天应用
Web Chat 是开源的聊天系统,支持一键免费部署私人Chat网页的应用程序。 开源地址:https://github.com/loks666/webchat 目录树 TOC 👋🏻 开始使用 & 交流🛳 开箱即用 A 使用 Docker 部署B 使用 Docker-compose…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
