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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

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

算法学习——华为机考题库10(HJ64 - HJ69)

算法学习——华为机考题库10(HJ64 - HJ69) HJ64 MP3光标位置 描述 MP3 Player因为屏幕较小,显示歌曲列表的时候每屏只能显示几首歌曲,用户要通过上下键才能浏览所有的歌曲。为了简化处理,假设每屏只能显示4首歌曲&a…

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

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

xlsx xlsx-style 使用和坑记录

1 安装之后报错 npm install xlsx --savenpm install xlsx-style --save Umi运行会报错 自己代码 import XLSX from "xlsx"; import XLSXStyle from "xlsx-style";const data [["demo1","demo2","demo3","demo4&quo…

linux中的gdb调试

gdb是在程序运行的结果与预期不符合时,可以使用gdb进行调试 注意:使用gdb调试时要在编译上加-g参数 gcc -g -c hello.c 启动gdb调试: gdb file 对gdb进行调试 设置运行参数: set args 可指定运行参数 show args 可以查…

群晖NAS开启FTP服务结合内网穿透实现公网远程访问本地服务

⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 文章目录 ⛳️ 推荐1. 群晖安装Cpolar2. 创建FTP公网地址3. 开启群晖FTP服务4. 群晖FTP远程连接5. 固定FTP公网地址6. 固定FTP…

【C语言】static关键字的使用

目录 一、静态本地变量 1.1 静态本地变量的定义 1.2 静态本地变量和非静态本地变量的区别 二、静态函数 2.1 静态函数的定义 2.2 静态函数与非静态函数的区别 三、静态全局变量 3.1 静态全局变量的定义 3.2 静态全局变量和非静态全局变量的区别 四、静态结构体变量 …

数据库管理phpmyadmin

子任务1-PHPmyadmin软件的使用 本子任务讲解phpmyadmin的介绍和使用操作。 训练目标 1、掌握PHPmyadmin软件的使用方法。 步骤1 phpMyAdmin 介绍 phpmyadmin是一个用PHP编写的软件工具,可以通过web方式控制和操作MySQL数据库。通过phpMyAdmin可以完全对数据库进行…

使用pandas将excel转成json格式

1.Excel数据 2.我们想要的JSON格式 {"0": {"raw_data1": "Sam","raw_data2": "Wong","raw_data3": "Good","layer": "12v1"},"1": {"raw_data1": "Lucy…

渗透测试练习题解析 2(CTF web)

题目均来自 BUUCTF 1、[极客大挑战 2019]Upload 1 考点:文件上传漏洞 进入靶场 一看就知道是考察文件上传漏洞,看源码有没有敏感信息 没有什么敏感信息,那我们试着按要求传一张图片看看结果,但是传了 png、jpg 类型的图片后发现上…

Dijkstra算法(求最短路)

简介: 迪杰斯特拉算法(Dijkstra)是由荷兰计算机科学家狄克斯特拉于1959年提出的,因此又叫狄克斯特拉算法。是从一个顶点到其余各顶点的最短路径算法,解决的是有权图中最短路径问题。 特点: 迪杰斯特拉算法采用的是一种贪心策略&a…

深度神经网络中的BNN和DNN:基于存内计算的原理、实现与能量效率

前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言引言内存计算体系结构深度神经网络(DNN)随机梯度的优…