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-shrinkflex-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的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/371567.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数仓建设规范

目录 前言 一、数据模型设计规范 1.1 数仓分层原则 1.2 主题域划分原则 1.3 数据模型设计原则 1.4 数据模型管理的目标 1.5 数仓建模的方法 1.5.1 维度建模 1.5.2 三范式建模 1.5.3 三范式与维度建模区别 二、数仓公共开发规范 2.1 层次调用规范 2.2 数据类型规范…

redis(4)

文章目录 一、redis主从复制redis 主从复制架构主从复制实现命令行配置同步日志修改slave节点配置文件 主从复制故障恢复主从复制故障恢复过程介绍主从复制故障恢复实现 实现redis的级联复制主从复制优化主从复制过程主从同步优化配置 常见主从复制故障汇总master密码不对Redis…

C系列-柔性数组

🌈个人主页: 会编程的果子君 ​💫个人格言:“成为自己未来的主人~” 目录 ​编辑 柔性数组 柔性数组的特点 柔性数组的使用 柔性数组的优势 柔性数组 也许你从来没有听说过柔性数组这个概念,但是它确实是存在的,C99中&#…

python 安装 流程

1. 下载python解析器。(根据软件安装提示,傻瓜式操作。勾选 将其添加到path 环境变量)Download Python | Python.org 2. 在Python环境中 安装selenium模块 命令行中 运行 pip install selenium 如果你使用的是Python3,可能需要…

list基本使用

list基本使用 构造迭代器容量访问修改 list容器底层是带头双向链表结构&#xff0c;可以在常数范围内在任意位置进行输入和删除&#xff0c;但不支持任意位置的随机访问&#xff08;如不支持[ ]下标访问&#xff09;&#xff0c;下面介绍list容器的基本使用接口。 template <…

租用海外服务器丢包是什么情况?

在当今的互联网时代&#xff0c;海外服务器租用已经成为了许多企业和个人的选择。然而&#xff0c;在使用海外服务器的过程中&#xff0c;有时会出现丢包的情况&#xff0c;这给用户带来了不小的困扰。那么&#xff0c;租用海外服务器丢包是什么情况呢&#xff1f;本文将对此进…

Java Arrays 的相关操作数组排序

Java Arrays 的相关操作数组排序 package com.zhong.arrays;import java.math.BigDecimal; import java.util.Arrays; import java.util.Comparator;public class ArraysDemo {public static void main(String[] args) {int[] arr {10, 20, 40, 30, 90, 60, 10, 30, 50};// A…

profinet转CANopen网关在博图如何配置profinet从站步骤

Profinet转CANopen网关&#xff08;XD-COPNm20&#xff09;是一种用于实现CANopen设备与Profinet网络连接起来进行设备之间的数据交换和通信的设备。CANopen和Profinet是两种常见的工业通信协议&#xff0c;它们在自动化控制系统中有着广泛的应用。因此CANopen转Profinet网关在…

k8s-常用工作负载控制器(更高级管理Pod)

一、工作负载控制器是什么&#xff1f; 二、Deploymennt控制器&#xff1a;介绍与部署应用 部署 三、Deployment控制器&#xff1a;滚动升级、零停机 方式一&#xff1a; 通个加入健康检查可以&#xff0c;看到&#xff0c;nginx容器逐个被替代&#xff0c;最终每个都升级完成&…

前端学习第4天

一、复合选择器 1.后代选择器 2.子代选择器 3.并集选择器 4.交集选择器 5.伪类选择器 1.伪类-超链接&#xff08;拓展&#xff09; 二、CSS特性 1.继承性 body放在style中 2.层叠性 3.优先级 属性 !important;&#xff08;最高优先级&#xff09; 1.优先级-叠加计算规则 2.em…

zabbix监控mariadb数据库

zabbix监控mariadb数据库 1.创建监控用户及授权 [rootchang ~]# mysql -uroot -p123qqq.A MariaDB [(none)]> CREATE USER monitor% IDENTIFIED BY 123qqq.A; MariaDB [(none)]> GRANT REPLICATION CLIENT,PROCESS,SHOW DATABASES,SHOW VIEW ON *.* TO monitor%; Maria…

Vue中nextTick方法的作用与原理

在Vue的开发中&#xff0c;你可能会遇到一些异步更新的问题&#xff0c;如在改变数据后需要等待DOM更新完毕后再进行下一步操作。这时就可以使用Vue提供的nextTick方法来解决这个问题。 nextTick方法的作用是在DOM更新之后执行回调函数&#xff0c;确保在下次DOM更新循环结束之…

大型软件编程实例分享,诊所门诊处方笺管理系统多台电脑同时使用的软件教程

大型软件编程实例分享&#xff0c;诊所门诊处方笺管理系统多台电脑同时使用的软件教程 一、前言 以下教程以 佳易王诊所门诊电子处方管理系统V17.2 为例说明 软件资源可以点击最下方官网卡片了解详情 软件左侧为导航栏 1、系统参数设置&#xff1a;可以设置打印等参数 2、…

为电子表格嵌入数据库,Excel/WPS一键升级为管理系统

将Excel表格转化为管理系统&#xff0c;这款工具能够实现只需导入表格数据&#xff0c;即可自动生成相应的软件和APP。 表格办公的烦恼&#xff0c;有遇到吧&#xff1f; 对于具有一定规模的企业而言&#xff0c;各类表格如同繁星般众多&#xff0c;既有日常使用的常规表格&a…

幻兽帕鲁客户端存档文件 - 云上备份和恢复教程

本文将详细介绍如何将幻兽帕鲁游戏客户端的存档文件备份至云端&#xff0c;以及如何从云端恢复存档数据至本地。 一、游戏存档备份场景 幻兽帕鲁的游戏进度存储在电脑本地磁盘上&#xff0c;游戏中创建的每个世界都对应一个本地存档文件夹。在玩游戏过程中&#xff0c;客户端…

目标检测:2如何生成自己的数据集

目录 1. 数据采集 2. 图像标注 3. 开源已标记数据集 4. 数据集划分 参考&#xff1a; 1. 数据采集 数据采集是深度学习和人工智能任务中至关重要的一步&#xff0c;它为模型提供了必要的训练样本和测试数据。在实际应用中&#xff0c;数据采集的方法多种多样&#xff0c;每…

斗破年番:七星斗宗地魔老鬼,首战吊打萧炎,毁灭莲逼出千百二老

Hello,小伙伴们&#xff0c;我是拾荒君。 国漫《斗破苍穹年番》第82期超前爆料&#xff0c;在万众瞩目之下&#xff0c;卡点帝再次展现了他的卡点救场技巧。此次&#xff0c;韩枫为了除掉萧炎&#xff0c;以他击杀魔炎谷四位长老为借口&#xff0c;请来了七品斗宗地魔老鬼。更…

MicroPython ESP32开发:通过寄存器直接访问外围设备

可以通过直接读写寄存器来控制 ESP32 的外设。这就需要阅读数据手册&#xff0c;了解要使用哪些寄存器以及要写入哪些值。下面的示例展示了如何打开和更改 MCPWM0 外设的预分频器。 from micropython import const from machine import mem32# Define the register addresses …

vulhub中Apache APISIX 默认密钥漏洞复现(CVE-2020-13945)

Apache APISIX是一个高性能API网关。在用户未指定管理员Token或使用了默认配置文件的情况下&#xff0c;Apache APISIX将使用默认的管理员Token edd1c9f034335f136f87ad84b625c8f1&#xff0c;攻击者利用这个Token可以访问到管理员接口&#xff0c;进而通过script参数来插入任意…

C++学习Day02之class基础使用

目录 一、程序与输出1.1 设计一个类&#xff0c;求圆的周长1.2 设计一个学生类 二、分析与总结 一、程序与输出 1.1 设计一个类&#xff0c;求圆的周长 #include<iostream> using namespace std; #include <string> //设计一个类&#xff0c;求圆的周长 const do…